@oasisomniverse/js 1.0.0

package/src/search-avatar.js

@@ -0,0 +1,78 @@
+/**
+ * OasisSearchAvatar — search avatars popup widget
+ * Usage: const w = new OasisSearchAvatar({ onSelect: (avatar) => {} }); w.open();
+ */
+class OasisSearchAvatar {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles();
+    if (container) this._render(container);
+  }
+
+  _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-modal.lg{max-width:900px}.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-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus,.oasis-select:focus,.oasis-textarea:focus{border-color:rgba(0,200,255,.5)}.oasis-textarea{resize:vertical;min-height:80px}.oasis-select option{background:#0a1628}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-btn-ghost{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#00c8ff;border-radius:8px;font-size:12px;font-weight:600;padding:9px 16px;cursor:pointer}.oasis-btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}.oasis-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}.oasis-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:12px}.oasis-info-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;margin-bottom:4px}.oasis-info-value{color:#fff;font-size:14px;font-weight:500}.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-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-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-red{background:rgba(255,80,80,.15);color:#ff6b6b}.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}.oasis-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}.oasis-stat{flex:1;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c8ff}.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px}.oasis-divider{border:none;border-top:1px solid rgba(0,200,255,.1);margin:16px 0}.oasis-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}.oasis-radio-group{display:flex;gap:16px;margin-bottom:16px}.oasis-radio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;cursor:pointer}.oasis-radio-label input[type=radio]{accent-color:#00c8ff}.oasis-link{background:none;border:none;color:#00c8ff;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}.oasis-chat-area{background:rgba(0,0,0,.2);border:1px solid rgba(0,200,255,.1);border-radius:10px;height:220px;overflow-y:auto;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}.oasis-chat-bubble{background:rgba(0,200,255,.1);border-radius:10px;padding:8px 12px;font-size:13px;color:#fff;max-width:75%}.oasis-chat-bubble.mine{background:rgba(0,128,255,.2);align-self:flex-end}.oasis-chat-input-row{display:flex;gap:8px}.oasis-chat-input-row .oasis-input{flex:1}`;
+    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">${this._buildBody()}</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'));
+    const btn = this._overlay.querySelector('#oasis-sa-btn');
+    const inp = this._overlay.querySelector('#oasis-sa-q');
+    btn.addEventListener('click', () => this._doSearch());
+    inp.addEventListener('keydown', e => { if (e.key === 'Enter') this._doSearch(); });
+  }
+
+  _buildBody() {
+    return `
+      <div class="oasis-search-row">
+        <input class="oasis-input" id="oasis-sa-q" type="text" placeholder="Search by username or name…" />
+        <button class="oasis-btn" id="oasis-sa-btn" style="white-space:nowrap">Search</button>
+      </div>
+      <div id="oasis-sa-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Enter a name or username to search avatars.</p></div>
+    `;
+  }
+
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-sa-q').value.trim();
+    const res = this._overlay.querySelector('#oasis-sa-results');
+    const btn = this._overlay.querySelector('#oasis-sa-btn');
+    if (!q) return;
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const r = await fetch(`${this._apiUrl}/api/avatar/search?username=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const avatars = Array.isArray(data) ? data : (data.result || []);
+      if (!avatars.length) { res.innerHTML = '<p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">No avatars found.</p>'; }
+      else {
+        res.innerHTML = `<table class="oasis-table"><thead><tr><th>Username</th><th>Name</th><th>Karma</th><th></th></tr></thead><tbody>${avatars.map(a => `<tr><td>${a.username || '—'}</td><td>${a.firstName || ''} ${a.lastName || ''}</td><td>${a.karma ?? 0}</td><td><button class="oasis-badge oasis-badge-blue" data-id="${a.id}">Select</button></td></tr>`).join('')}</tbody></table>`;
+        res.querySelectorAll('[data-id]').forEach(b => b.addEventListener('click', () => { if (this._onSelect) this._onSelect(avatars.find(a => a.id === b.dataset.id)); this.close(); }));
+      }
+    } catch { res.innerHTML = '<p style="color:#ff6b6b;font-size:13px;text-align:center;margin:24px 0">Search failed. Please try again.</p>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+
+  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();
+  }
+
+  _render(container) { container.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+
+window.OasisSearchAvatar = OasisSearchAvatar;

package/src/search-data.js

@@ -0,0 +1,59 @@
+/**
+ * OasisSearchData — search OASIS data store popup widget
+ * Usage: const w = new OasisSearchData({ onSelect: (item) => {} }); w.open();
+ */
+class OasisSearchData {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _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:700px;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-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus,.oasis-select:focus{border-color:rgba(0,200,255,.5)}.oasis-select option{background:#0a1628}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}.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-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-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.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">Search Data</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._buildBody()}</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'));
+    const btn = this._overlay.querySelector('#oasis-sd-btn');
+    btn.addEventListener('click', () => this._doSearch());
+    this._overlay.querySelector('#oasis-sd-q').addEventListener('keydown', e => { if (e.key === 'Enter') this._doSearch(); });
+  }
+  _buildBody() {
+    return `<div class="oasis-search-row">
+      <input class="oasis-input" id="oasis-sd-q" type="text" placeholder="Search by key or value…" />
+      <select class="oasis-select" id="oasis-sd-prov" style="width:auto;flex-shrink:0"><option value="">All Providers</option><option value="holochain">Holochain</option><option value="ethereum">Ethereum</option><option value="ipfs">IPFS</option><option value="mongodb">MongoDB</option></select>
+      <button class="oasis-btn" id="oasis-sd-btn" style="white-space:nowrap">Search</button>
+    </div>
+    <div id="oasis-sd-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Enter a query to search the OASIS data store.</p></div>`;
+  }
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-sd-q').value.trim();
+    const prov = this._overlay.querySelector('#oasis-sd-prov').value;
+    const res = this._overlay.querySelector('#oasis-sd-results');
+    const btn = this._overlay.querySelector('#oasis-sd-btn');
+    if (!q) return;
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const url = `${this._apiUrl}/api/data/search?query=${encodeURIComponent(q)}${prov ? '&provider=' + prov : ''}`;
+      const r = await fetch(url);
+      const data = await r.json();
+      const items = Array.isArray(data) ? data : (data.result || []);
+      if (!items.length) res.innerHTML = '<p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">No results found.</p>';
+      else res.innerHTML = `<table class="oasis-table"><thead><tr><th>Key</th><th>Provider</th><th>Modified</th><th></th></tr></thead><tbody>${items.map(i => `<tr><td>${i.key || '—'}</td><td><span class="oasis-badge oasis-badge-blue">${i.provider || '—'}</span></td><td>${i.modifiedDate ? new Date(i.modifiedDate).toLocaleDateString() : '—'}</td><td><button class="oasis-badge oasis-badge-green" data-idx="${items.indexOf(i)}">Select</button></td></tr>`).join('')}</tbody></table>`;
+      res.querySelectorAll('[data-idx]').forEach(b => b.addEventListener('click', () => { if (this._onSelect) this._onSelect(items[+b.dataset.idx]); this.close(); }));
+    } catch { res.innerHTML = '<div class="oasis-msg oasis-msg-error">Search failed.</div>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+  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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisSearchData = OasisSearchData;

package/src/search-eggs.js

@@ -0,0 +1,49 @@
+/**
+ * OasisSearchEggs — search OASIS Eggs popup widget
+ * Usage: const w = new OasisSearchEggs({ onSelect: (egg) => {} }); w.open();
+ */
+class OasisSearchEggs {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _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-input,.oasis-select{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus,.oasis-select:focus{border-color:rgba(0,200,255,.5)}.oasis-select option{background:#0a1628}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer}.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-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-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.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">Search Eggs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._buildBody()}</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._overlay.querySelector('#oasis-se-btn').addEventListener('click', () => this._doSearch());
+  }
+  _buildBody() {
+    return `<div class="oasis-search-row"><input class="oasis-input" id="oasis-se-q" type="text" placeholder="Search eggs by name or type…" /><button class="oasis-btn" id="oasis-se-btn">Search</button></div><div id="oasis-se-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Search the OASIS Egg registry.</p></div>`;
+  }
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-se-q').value.trim();
+    const res = this._overlay.querySelector('#oasis-se-results');
+    const btn = this._overlay.querySelector('#oasis-se-btn');
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const r = await fetch(`${this._apiUrl}/api/avatar/eggs/search?query=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const eggs = Array.isArray(data) ? data : (data.result || []);
+      if (!eggs.length) res.innerHTML = '<p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">No eggs found.</p>';
+      else res.innerHTML = `<table class="oasis-table"><thead><tr><th>Name</th><th>Type</th><th>Status</th><th></th></tr></thead><tbody>${eggs.map((e,i)=>`<tr><td>${e.name||'Egg'}</td><td><span class="oasis-badge oasis-badge-blue">${e.eggType||'Unknown'}</span></td><td><span class="oasis-badge ${e.isHatched?'oasis-badge-green':'oasis-badge-yellow'}">${e.isHatched?'Hatched':'Incubating'}</span></td><td><button class="oasis-badge oasis-badge-blue" data-i="${i}">Select</button></td></tr>`).join('')}</tbody></table>`;
+      res.querySelectorAll('[data-i]').forEach(b=>b.addEventListener('click',()=>{if(this._onSelect)this._onSelect(eggs[+b.dataset.i]);this.close();}));
+    } catch { res.innerHTML = '<p style="color:#ff6b6b;font-size:13px;text-align:center;margin:24px 0">Search failed.</p>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+  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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisSearchEggs = OasisSearchEggs;

package/src/search-karma.js

@@ -0,0 +1,48 @@
+/**
+ * OasisSearchKarma — search karma transactions popup widget
+ * Usage: const w = new OasisSearchKarma({ onSelect: (item) => {} }); w.open();
+ */
+class OasisSearchKarma {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _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-input,.oasis-select{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus,.oasis-select:focus{border-color:rgba(0,200,255,.5)}.oasis-select option{background:#0a1628}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer}.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-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-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.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">Search Karma</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._buildBody()}</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._overlay.querySelector('#oasis-sk-btn').addEventListener('click', () => this._doSearch());
+  }
+  _buildBody() {
+    return `<div class="oasis-search-row"><input class="oasis-input" id="oasis-sk-q" type="text" placeholder="Search by avatar username…" /><button class="oasis-btn" id="oasis-sk-btn">Search</button></div><div id="oasis-sk-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Search karma by avatar or action.</p></div>`;
+  }
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-sk-q').value.trim();
+    const res = this._overlay.querySelector('#oasis-sk-results');
+    const btn = this._overlay.querySelector('#oasis-sk-btn');
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const r = await fetch(`${this._apiUrl}/api/karma/search?query=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const items = Array.isArray(data) ? data : (data.result || []);
+      if (!items.length) res.innerHTML = '<p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">No karma records found.</p>';
+      else res.innerHTML = `<table class="oasis-table"><thead><tr><th>Avatar</th><th>Action</th><th>⚡ Karma</th><th>Date</th></tr></thead><tbody>${items.map(i=>`<tr><td>${i.avatarUsername||'—'}</td><td>${i.karmaType||'—'}</td><td><span class="oasis-badge oasis-badge-blue">+${i.karmaAmount??0}</span></td><td>${i.date?new Date(i.date).toLocaleDateString():'—'}</td></tr>`).join('')}</tbody></table>`;
+    } catch { res.innerHTML = '<p style="color:#ff6b6b;font-size:13px;text-align:center;margin:24px 0">Search failed.</p>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+  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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisSearchKarma = OasisSearchKarma;

package/src/search-mission.js

@@ -0,0 +1,50 @@
+/**
+ * OasisSearchMission — search OASIS missions popup widget
+ * Usage: const w = new OasisSearchMission({ onSelect: (mission) => {} }); w.open();
+ */
+class OasisSearchMission {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _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-input{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.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-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.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">Search Missions</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._buildBody()}</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._overlay.querySelector('#oasis-sm-btn').addEventListener('click', () => this._doSearch());
+    this._overlay.querySelector('#oasis-sm-q').addEventListener('keydown', e => { if (e.key === 'Enter') this._doSearch(); });
+  }
+  _buildBody() {
+    return `<div class="oasis-search-row"><input class="oasis-input" id="oasis-sm-q" type="text" placeholder="Search missions…" /><button class="oasis-btn" id="oasis-sm-btn">Search</button></div><div id="oasis-sm-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Search for OASIS missions.</p></div>`;
+  }
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-sm-q').value.trim();
+    const res = this._overlay.querySelector('#oasis-sm-results');
+    const btn = this._overlay.querySelector('#oasis-sm-btn');
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const r = await fetch(`${this._apiUrl}/api/mission/search?query=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const ms = Array.isArray(data) ? data : (data.result || []);
+      if (!ms.length) res.innerHTML = '<p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">No missions found.</p>';
+      else res.innerHTML = `<table class="oasis-table"><thead><tr><th>Mission</th><th>Type</th><th>Karma</th><th></th></tr></thead><tbody>${ms.map((m,i)=>`<tr><td>${m.name||'—'}</td><td><span class="oasis-badge oasis-badge-blue">${m.missionType||'—'}</span></td><td>+${m.karmaReward??0} ⚡</td><td><button class="oasis-badge oasis-badge-green" data-i="${i}">Select</button></td></tr>`).join('')}</tbody></table>`;
+      res.querySelectorAll('[data-i]').forEach(b=>b.addEventListener('click',()=>{if(this._onSelect)this._onSelect(ms[+b.dataset.i]);this.close();}));
+    } catch { res.innerHTML = '<p style="color:#ff6b6b;font-size:13px;text-align:center;margin:24px 0">Search failed.</p>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+  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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisSearchMission = OasisSearchMission;

package/src/search-oasis-nft.js

@@ -0,0 +1,49 @@
+/**
+ * OasisSearchOasisNft — search OASIS NFTs popup widget
+ * Usage: const w = new OasisSearchOasisNft({ onSelect: (nft) => {} }); w.open();
+ */
+class OasisSearchOasisNft {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _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-input,.oasis-select{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus,.oasis-select:focus{border-color:rgba(0,200,255,.5)}.oasis-select option{background:#0a1628}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer}.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-nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}.oasis-nft-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:border-color .2s}.oasis-nft-card:hover{border-color:rgba(0,200,255,.4)}.oasis-nft-thumb{font-size:36px;margin-bottom:8px}.oasis-nft-card-name{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px}.oasis-nft-price{font-size:11px;color:#00c8ff}.oasis-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.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">Search NFTs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._buildBody()}</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._overlay.querySelector('#oasis-snft-btn').addEventListener('click', () => this._doSearch());
+    this._overlay.querySelector('#oasis-snft-q').addEventListener('keydown', e => { if (e.key === 'Enter') this._doSearch(); });
+  }
+  _buildBody() {
+    return `<div class="oasis-search-row"><input class="oasis-input" id="oasis-snft-q" type="text" placeholder="Search by name, collection, or creator…" /><button class="oasis-btn" id="oasis-snft-btn">Search</button></div><div id="oasis-snft-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Search the OASIS NFT marketplace.</p></div>`;
+  }
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-snft-q').value.trim();
+    const res = this._overlay.querySelector('#oasis-snft-results');
+    const btn = this._overlay.querySelector('#oasis-snft-btn');
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const r = await fetch(`${this._apiUrl}/api/nft/search?query=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const nfts = Array.isArray(data) ? data : (data.result || []);
+      if (!nfts.length) res.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🖼️</div><p>No NFTs found.</p></div>';
+      else { res.innerHTML = `<div class="oasis-nft-grid">${nfts.map((n,i)=>`<div class="oasis-nft-card" data-i="${i}"><div class="oasis-nft-thumb">🖼️</div><div class="oasis-nft-card-name">${n.name||'NFT'}</div><div class="oasis-nft-price">${n.price||'—'} ${n.currency||'ETH'}</div></div>`).join('')}</div>`; res.querySelectorAll('[data-i]').forEach(b=>b.addEventListener('click',()=>{if(this._onSelect)this._onSelect(nfts[+b.dataset.i]);this.close();})); }
+    } catch { res.innerHTML = '<p style="color:#ff6b6b;font-size:13px;text-align:center;margin:24px 0">Search failed.</p>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+  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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisSearchOasisNft = OasisSearchOasisNft;

package/src/search-profiles.js

@@ -0,0 +1,50 @@
+/**
+ * OasisSearchProfiles — search game profiles popup widget
+ * Usage: const w = new OasisSearchProfiles({ onSelect: (profile) => {} }); w.open();
+ */
+class OasisSearchProfiles {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSelect = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSelect = onSelect; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _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-input,.oasis-select{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.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-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.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">Search Profiles</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._buildBody()}</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._overlay.querySelector('#oasis-sp-btn').addEventListener('click', () => this._doSearch());
+    this._overlay.querySelector('#oasis-sp-q').addEventListener('keydown', e => { if (e.key === 'Enter') this._doSearch(); });
+  }
+  _buildBody() {
+    return `<div class="oasis-search-row"><input class="oasis-input" id="oasis-sp-q" type="text" placeholder="Search game profiles…" /><button class="oasis-btn" id="oasis-sp-btn">Search</button></div><div id="oasis-sp-results"><p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">Search OASIS game profiles.</p></div>`;
+  }
+  async _doSearch() {
+    const q = this._overlay.querySelector('#oasis-sp-q').value.trim();
+    const res = this._overlay.querySelector('#oasis-sp-results');
+    const btn = this._overlay.querySelector('#oasis-sp-btn');
+    btn.textContent = '…'; btn.disabled = true;
+    try {
+      const r = await fetch(`${this._apiUrl}/api/game/profiles/search?query=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const profiles = Array.isArray(data) ? data : (data.result || []);
+      if (!profiles.length) res.innerHTML = '<p style="color:#7a9bbf;font-size:13px;text-align:center;margin:24px 0">No profiles found.</p>';
+      else res.innerHTML = `<table class="oasis-table"><thead><tr><th>Username</th><th>Level</th><th>XP</th><th></th></tr></thead><tbody>${profiles.map((p,i)=>`<tr><td>${p.username||'—'}</td><td>${p.level??1}</td><td>${p.xp??0}</td><td><button class="oasis-badge oasis-badge-blue" data-i="${i}">View</button></td></tr>`).join('')}</tbody></table>`;
+      res.querySelectorAll('[data-i]').forEach(b=>b.addEventListener('click',()=>{if(this._onSelect)this._onSelect(profiles[+b.dataset.i]);this.close();}));
+    } catch { res.innerHTML = '<p style="color:#ff6b6b;font-size:13px;text-align:center;margin:24px 0">Search failed.</p>'; }
+    btn.textContent = 'Search'; btn.disabled = false;
+  }
+  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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisSearchProfiles = OasisSearchProfiles;

package/src/seeds.js

@@ -0,0 +1,83 @@
+/**
+ * OasisSeeds — standalone Seeds widget
+ * Usage: new OasisSeeds({ container: document.getElementById('seeds') })
+ */
+(function () {
+  const SEEDS = [
+    { id: '1', name: 'Wisdom Seed', type: 'Spiritual', rarity: 'rare', karma: 50, planted: false },
+    { id: '2', name: 'Healing Seed', type: 'Health', rarity: 'common', karma: 20, planted: false },
+    { id: '3', name: 'Unity Seed', type: 'Community', rarity: 'epic', karma: 150, planted: false },
+    { id: '4', name: 'Truth Seed', type: 'Knowledge', rarity: 'legendary', karma: 500, planted: false },
+    { id: '5', name: 'Love Seed', type: 'Spiritual', rarity: 'common', karma: 30, planted: false },
+    { id: '6', name: 'Peace Seed', type: 'Community', rarity: 'rare', karma: 75, planted: false },
+  ];
+  const ICONS = { Spiritual: '✨', Health: '💚', Community: '🤝', Knowledge: '📖' };
+  const RARITY_COLORS = { common: '#7a9bbf', rare: '#5ba8ff', epic: '#b87fff', legendary: '#ffb43c' };
+
+  const CSS = `
+.oasis-seeds-shell{font-family:'Rajdhani',sans-serif;display:flex;flex-direction:column;gap:20px}
+.oasis-seeds-header{text-align:center}
+.oasis-seeds-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+.oasis-seeds-sub{font-size:13px;color:#7a9bbf;margin:0}
+.oasis-seeds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
+.oasis-seed-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .2s;cursor:default}
+.oasis-seed-card:hover{border-color:rgba(0,200,255,.35)}
+.oasis-seed-card.planted{border-color:rgba(72,220,130,.3);background:rgba(72,220,130,.04)}
+.oasis-seed-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}
+.oasis-seed-icon{font-size:36px}
+.oasis-seed-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;text-align:center}
+.oasis-seed-type{font-size:11px;color:#7a9bbf}
+.oasis-seed-karma{font-size:12px;color:#48dc82;font-weight:600}
+.oasis-seed-btn{width:100%;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:8px;cursor:pointer;transition:opacity .2s}
+.oasis-seed-btn:hover{opacity:.85}
+.oasis-seed-planted{font-size:12px;color:#48dc82;font-weight:600}
+`;
+
+  class OasisSeeds {
+    constructor({ container } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisSeeds: container not found');
+      if (!document.getElementById('oasis-seeds-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-seeds-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._seeds = SEEDS.map(s => ({ ...s }));
+      this._render();
+    }
+
+    _render() {
+      this._container.innerHTML = `
+        <div class="oasis-seeds-shell">
+          <div class="oasis-seeds-header">
+            <h2 class="oasis-seeds-title">🌱 Seeds</h2>
+            <p class="oasis-seeds-sub">Plant seeds to grow your OASIS avatar and earn karma.</p>
+          </div>
+          <div class="oasis-seeds-grid">
+            ${this._seeds.map(s => `
+              <div class="oasis-seed-card${s.planted ? ' planted' : ''}" data-id="${s.id}">
+                <div class="oasis-seed-rarity" style="color:${RARITY_COLORS[s.rarity]};border-color:${RARITY_COLORS[s.rarity]}44">${s.rarity}</div>
+                <div class="oasis-seed-icon">${ICONS[s.type] || '🌱'}</div>
+                <div class="oasis-seed-name">${s.name}</div>
+                <div class="oasis-seed-type">${s.type}</div>
+                <div class="oasis-seed-karma">+${s.karma} Karma</div>
+                ${s.planted
+                  ? '<div class="oasis-seed-planted">🌿 Growing…</div>'
+                  : `<button class="oasis-seed-btn" data-plant="${s.id}">Plant Seed</button>`}
+              </div>`).join('')}
+          </div>
+        </div>`;
+      this._container.querySelectorAll('[data-plant]').forEach(btn => {
+        btn.addEventListener('click', () => { this._plant(btn.dataset.plant); });
+      });
+    }
+
+    _plant(id) {
+      const s = this._seeds.find(x => x.id === id);
+      if (s) { s.planted = true; this._render(); }
+    }
+
+    destroy() { this._container.innerHTML = ''; }
+  }
+
+  window.OasisSeeds = OasisSeeds;
+})();