@oasisomniverse/js 1.0.0

package/src/manage-oasis-nft.js

@@ -0,0 +1,41 @@
+/**
+ * OasisManageOasisNft — manage OASIS NFTs popup widget
+ * Usage: const w = new OasisManageOasisNft({}); w.open();
+ */
+class OasisManageOasisNft {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._apiUrl = apiUrl; 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-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-badge-red{background:rgba(255,80,80,.15);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-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}.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}`;
+    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 NFTs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-mnft-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading NFTs…</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-mnft-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/nft`);
+      const data = await r.json();
+      const nfts = Array.isArray(data) ? data : (data.result || []);
+      if (!nfts.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🖼️</div><h3>No NFTs</h3><p>No NFTs in your collection.</p></div>'; return; }
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${nfts.length}</div><div class="oasis-stat-lbl">Total NFTs</div></div><div class="oasis-stat"><div class="oasis-stat-val">${nfts.filter(n=>n.isListed).length}</div><div class="oasis-stat-lbl">Listed</div></div></div><table class="oasis-table"><thead><tr><th>Name</th><th>Collection</th><th>Chain</th><th>Status</th></tr></thead><tbody>${nfts.map(n=>`<tr><td>${n.name||'—'}</td><td>${n.collection||'—'}</td><td><span class="oasis-badge oasis-badge-blue">${n.chain||'ETH'}</span></td><td><span class="oasis-badge ${n.isListed?'oasis-badge-green':'oasis-badge-yellow'}">${n.isListed?'Listed':'Held'}</span></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load NFTs.</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(); }
+  _render(c) { c.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading…</p></div>'; }
+  destroy() { this.close(); }
+}
+window.OasisManageOasisNft = OasisManageOasisNft;

package/src/message.js

@@ -0,0 +1,57 @@
+/**
+ * OasisMessage — messaging UI popup widget
+ * Usage: const w = new OasisMessage({ recipientId: '...', recipientName: 'Alice' }); w.open();
+ */
+class OasisMessage {
+  constructor({ container, recipientId = '', recipientName = 'Avatar', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._recipientId = recipientId; this._recipientName = recipientName; this._apiUrl = apiUrl; 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: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-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-chat-area{background:rgba(0,0,0,.2);border:1px solid rgba(0,200,255,.1);border-radius:10px;height:240px;overflow-y:auto;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}.oasis-chat-bubble{border-radius:10px;padding:8px 12px;font-size:13px;color:#fff;max-width:75%;background:rgba(0,200,255,.1)}.oasis-chat-bubble.mine{background:rgba(0,128,255,.2);align-self:flex-end;margin-left:auto}.oasis-chat-meta{font-size:10px;color:#7a9bbf;margin-top:3px}.oasis-chat-input-row{display:flex;gap:8px}.oasis-chat-input-row .oasis-input{flex:1}.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:12px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}`;
+    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">Message: ${this._recipientName}</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._attachEvents();
+  }
+  _buildBody() {
+    return `<div id="oasis-msg-err"></div>
+    <div class="oasis-chat-area" id="oasis-chat-area">
+      <div style="color:#7a9bbf;font-size:12px;text-align:center;padding:8px">Start of your conversation with ${this._recipientName}</div>
+    </div>
+    <div class="oasis-chat-input-row">
+      <input class="oasis-input" id="oasis-msg-input" type="text" placeholder="Type a message…" />
+      <button class="oasis-btn" id="oasis-msg-send" style="width:auto;padding:10px 16px">Send</button>
+    </div>`;
+  }
+  _attachEvents() {
+    const send = () => {
+      const input = this._overlay.querySelector('#oasis-msg-input');
+      const area = this._overlay.querySelector('#oasis-chat-area');
+      const text = input.value.trim();
+      if (!text) return;
+      const bubble = document.createElement('div');
+      bubble.innerHTML = `<div class="oasis-chat-bubble mine">${text}<div class="oasis-chat-meta">${new Date().toLocaleTimeString()}</div></div>`;
+      area.appendChild(bubble);
+      area.scrollTop = area.scrollHeight;
+      input.value = '';
+      fetch(`${this._apiUrl}/api/message`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ recipientId: this._recipientId, message: text }) }).catch(() => {});
+    };
+    this._overlay.querySelector('#oasis-msg-send').addEventListener('click', send);
+    this._overlay.querySelector('#oasis-msg-input').addEventListener('keydown', e => { if (e.key === 'Enter') send(); });
+  }
+  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>`; this._overlay = { querySelector: (s) => c.querySelector(s) }; this._attachEvents(); }
+  destroy() { this.close(); }
+}
+window.OasisMessage = OasisMessage;

package/src/navbar.js

@@ -0,0 +1,80 @@
+/**
+ * OasisNavBar — standalone responsive navigation bar widget
+ * Usage: new OasisNavBar({ container, brand, links, onLogin })
+ */
+(function () {
+  const CSS = `
+.oasis-nav{position:relative;z-index:100;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(3,7,20,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,200,255,.1);font-family:'Rajdhani',sans-serif;box-sizing:border-box}
+.oasis-nav-brand{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
+.oasis-nav-brand-icon{color:#00c8ff;font-size:16px}
+.oasis-nav-links{display:flex;gap:16px;list-style:none;margin:0;padding:0}
+.oasis-nav-links a{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.08em;color:#a8bfd8;text-decoration:none;transition:color .2s;text-transform:uppercase}
+.oasis-nav-links a:hover{color:#00c8ff}
+.oasis-nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
+.oasis-nav-login{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 16px;cursor:pointer;white-space:nowrap;transition:opacity .2s}
+.oasis-nav-login:hover{opacity:.85}
+.oasis-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:none;cursor:pointer;padding:0}
+.oasis-nav-toggle span{display:block;width:100%;height:2px;background:#a8bfd8;transition:transform .25s,opacity .25s;border-radius:1px}
+.oasis-nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
+.oasis-nav-toggle.open span:nth-child(2){opacity:0}
+.oasis-nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
+@media(max-width:900px){
+  .oasis-nav-toggle{display:flex}
+  .oasis-nav-links{position:fixed;top:0;right:0;height:100vh;width:min(78vw,300px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:14px;padding:72px 28px 24px;overflow-y:auto;background:rgba(3,7,20,.98);border-left:1px solid rgba(0,200,255,.12);transform:translateX(100%);transition:transform .3s ease;z-index:200}
+  .oasis-nav-links.open{transform:translateX(0)}
+}
+`;
+
+  class OasisNavBar {
+    constructor({
+      container,
+      brand = 'OASIS',
+      brandIcon = '✦',
+      links = [],
+      loginLabel = 'Login',
+      onLogin = null,
+    } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisNavBar: container not found');
+      if (!document.getElementById('oasis-nav-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-nav-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._brand = brand;
+      this._brandIcon = brandIcon;
+      this._links = links;
+      this._loginLabel = loginLabel;
+      this._onLogin = onLogin;
+      this._open = false;
+      this._render();
+    }
+
+    _render() {
+      this._container.innerHTML = `
+        <nav class="oasis-nav">
+          <a class="oasis-nav-brand" href="#">
+            <span class="oasis-nav-brand-icon">${this._brandIcon}</span>
+            <span>${this._brand}</span>
+          </a>
+          <button class="oasis-nav-toggle${this._open ? ' open' : ''}" id="oasis-nav-toggle" aria-label="Menu">
+            <span></span><span></span><span></span>
+          </button>
+          <ul class="oasis-nav-links${this._open ? ' open' : ''}">
+            ${this._links.map(l => `<li><a href="${l.href || '#'}">${l.label}</a></li>`).join('')}
+          </ul>
+          ${this._onLogin ? `<div class="oasis-nav-right"><button class="oasis-nav-login" id="oasis-nav-login">${this._loginLabel}</button></div>` : ''}
+        </nav>`;
+      document.getElementById('oasis-nav-toggle')?.addEventListener('click', () => {
+        this._open = !this._open; this._render();
+      });
+      document.getElementById('oasis-nav-login')?.addEventListener('click', this._onLogin);
+      this._container.querySelectorAll('.oasis-nav-links a').forEach(a => {
+        a.addEventListener('click', () => { this._open = false; this._render(); });
+      });
+    }
+
+    destroy() { this._container.innerHTML = ''; }
+  }
+
+  window.OasisNavBar = OasisNavBar;
+})();

package/src/oasis-modal.js

@@ -0,0 +1,79 @@
+/**
+ * OasisModal — reusable modal wrapper
+ * Usage:
+ *   const modal = new OasisModal({ title: 'My Modal', content: '<p>Hello</p>' })
+ *   modal.open()  /  modal.close()  /  modal.destroy()
+ */
+class OasisModal {
+  constructor({ title = '', content = '', accentColor = '#00c8ff', onClose = null } = {}) {
+    this._onClose = onClose;
+    this._el = null;
+    this._title = title;
+    this._content = content;
+    this._accent = accentColor;
+    this._build();
+  }
+
+  _build() {
+    const el = document.createElement('div');
+    el.className = 'oasis-modal-backdrop';
+    el.innerHTML = `
+      <div class="oasis-modal-box" role="dialog" aria-modal="true">
+        <div class="oasis-modal-header" style="border-bottom-color:${this._accent}33">
+          <span class="oasis-modal-title" style="color:${this._accent}">${this._title}</span>
+          <button class="oasis-modal-close" aria-label="Close">&#x2715;</button>
+        </div>
+        <div class="oasis-modal-body">${this._content}</div>
+      </div>
+    `;
+    el.querySelector('.oasis-modal-close').addEventListener('click', () => this.close());
+    el.addEventListener('click', e => { if (e.target === el) this.close(); });
+    document.addEventListener('keydown', this._onKey = e => { if (e.key === 'Escape') this.close(); });
+    this._el = el;
+    this._injectStyles();
+  }
+
+  _injectStyles() {
+    if (document.getElementById('oasis-modal-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'oasis-modal-styles';
+    s.textContent = `
+      .oasis-modal-backdrop{position:fixed;inset:0;background:rgba(3,7,20,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .25s}
+      .oasis-modal-backdrop.is-open{opacity:1}
+      .oasis-modal-box{background:#0d1829;border:1px solid rgba(0,200,255,.18);border-radius:16px;padding:28px;width:min(520px,92vw);max-height:88vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}
+      .oasis-modal-backdrop.is-open .oasis-modal-box{transform:none}
+      .oasis-modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid;margin-bottom:20px}
+      .oasis-modal-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em}
+      .oasis-modal-close{background:none;border:none;color:#7a9bbf;font-size:18px;cursor:pointer;padding:0;line-height:1}
+      .oasis-modal-close:hover{color:#fff}
+      .oasis-modal-body{color:#a8bfd8;font-size:14px;line-height:1.6}
+    `;
+    document.head.appendChild(s);
+  }
+
+  setContent(html) {
+    this._el.querySelector('.oasis-modal-body').innerHTML = html;
+  }
+
+  open() {
+    document.body.appendChild(this._el);
+    requestAnimationFrame(() => this._el.classList.add('is-open'));
+    document.body.style.overflow = 'hidden';
+  }
+
+  close() {
+    this._el.classList.remove('is-open');
+    this._el.addEventListener('transitionend', () => {
+      this._el.remove();
+      document.body.style.overflow = '';
+    }, { once: true });
+    if (this._onClose) this._onClose();
+  }
+
+  destroy() {
+    document.removeEventListener('keydown', this._onKey);
+    this._el.remove();
+  }
+}
+
+window.OasisModal = OasisModal;

package/src/off-chain-management.js

@@ -0,0 +1,36 @@
+/**
+ * OasisOffChainManagement — manage off-chain data providers popup widget
+ * Usage: const w = new OasisOffChainManagement({}); w.open();
+ */
+class OasisOffChainManagement {
+  constructor({ container, onClose = null } = {}) {
+    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:680px;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-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-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-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-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}.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">Off-Chain Management</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'));
+  }
+  _buildBody() {
+    const providers = [{ name: 'MongoDB', type: 'Document DB', status: 'connected', records: 1243 }, { name: 'Neo4j', type: 'Graph DB', status: 'connected', records: 892 }, { name: 'SQLite', type: 'Relational DB', status: 'disconnected', records: 0 }, { name: 'IPFS', type: 'Distributed FS', status: 'connected', records: 56 }];
+    return `<p class="oasis-section-title">Off-Chain Providers</p>
+    ${providers.map(p => `<div class="oasis-info-block" style="display:flex;align-items:center;justify-content:space-between"><div><div class="oasis-info-label">${p.name} — ${p.type}</div><div class="oasis-info-value">${p.records.toLocaleString()} records</div></div><span class="oasis-badge ${p.status === 'connected' ? 'oasis-badge-green' : 'oasis-badge-red'}">${p.status}</span></div>`).join('')}
+    <div style="text-align:right;margin-top:16px"><button class="oasis-btn" onclick="this.textContent='Refreshing…';setTimeout(()=>this.textContent='Refresh All',1500)">Refresh All</button></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(); }
+  _render(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisOffChainManagement = OasisOffChainManagement;

package/src/provider-dropdown.js

@@ -0,0 +1,87 @@
+/**
+ * OasisProviderDropdown — blockchain provider selector widget
+ * Usage: new OasisProviderDropdown({ container, onChange })
+ */
+(function () {
+  const PROVIDERS = [
+    { id: 'ethereum', name: 'Ethereum', icon: '⟠', color: '#627eea' },
+    { id: 'solana', name: 'Solana', icon: '◎', color: '#9945ff' },
+    { id: 'polygon', name: 'Polygon', icon: '⬡', color: '#8247e5' },
+    { id: 'arbitrum', name: 'Arbitrum', icon: '🔵', color: '#2d9cdb' },
+    { id: 'eosio', name: 'EOSIO', icon: '🔮', color: '#443f54' },
+    { id: 'holochain', name: 'Holochain', icon: '⬡', color: '#00e5be' },
+    { id: 'thegraph', name: 'The Graph', icon: '📊', color: '#6f4cff' },
+  ];
+
+  const CSS = `
+.oasis-pd-shell{position:relative;font-family:'Rajdhani',sans-serif}
+.oasis-pd-trigger{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .2s;color:#fff;width:100%;box-sizing:border-box}
+.oasis-pd-trigger:hover,.oasis-pd-trigger.open{border-color:rgba(0,200,255,.5)}
+.oasis-pd-icon{font-size:20px;width:28px;text-align:center}
+.oasis-pd-label{flex:1;text-align:left}
+.oasis-pd-name{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700}
+.oasis-pd-sub{font-size:11px;color:#7a9bbf;margin-top:2px}
+.oasis-pd-arrow{font-size:10px;color:#7a9bbf;transition:transform .2s}
+.oasis-pd-arrow.open{transform:rotate(180deg)}
+.oasis-pd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0d1b2e;border:1px solid rgba(0,200,255,.2);border-radius:10px;overflow:hidden;z-index:999;box-shadow:0 8px 32px rgba(0,0,0,.5)}
+.oasis-pd-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;color:#e0f0ff}
+.oasis-pd-option:hover{background:rgba(0,200,255,.1)}
+.oasis-pd-option.selected{background:rgba(0,200,255,.12);border-left:3px solid #00c8ff}
+.oasis-pd-opt-icon{font-size:18px;width:24px;text-align:center}
+.oasis-pd-opt-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700}
+`;
+
+  class OasisProviderDropdown {
+    constructor({ container, onChange, defaultProvider = 'ethereum' } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisProviderDropdown: container not found');
+      if (!document.getElementById('oasis-pd-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-pd-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._selected = PROVIDERS.find(p => p.id === defaultProvider) || PROVIDERS[0];
+      this._open = false;
+      this._onChange = onChange || (() => {});
+      this._render();
+      document.addEventListener('click', this._onDocClick.bind(this));
+    }
+
+    _render() {
+      const p = this._selected;
+      this._container.innerHTML = `
+        <div class="oasis-pd-shell">
+          <div class="oasis-pd-trigger${this._open ? ' open' : ''}" id="oasis-pd-trigger">
+            <div class="oasis-pd-icon" style="color:${p.color}">${p.icon}</div>
+            <div class="oasis-pd-label">
+              <div class="oasis-pd-name">${p.name}</div>
+              <div class="oasis-pd-sub">Active Provider</div>
+            </div>
+            <div class="oasis-pd-arrow${this._open ? ' open' : ''}">▼</div>
+          </div>
+          ${this._open ? `<div class="oasis-pd-menu" id="oasis-pd-menu">
+            ${PROVIDERS.map(pr => `
+              <div class="oasis-pd-option${pr.id === p.id ? ' selected' : ''}" data-id="${pr.id}">
+                <div class="oasis-pd-opt-icon" style="color:${pr.color}">${pr.icon}</div>
+                <div class="oasis-pd-opt-name">${pr.name}</div>
+              </div>`).join('')}
+          </div>` : ''}
+        </div>`;
+      document.getElementById('oasis-pd-trigger')?.addEventListener('click', e => { e.stopPropagation(); this._toggle(); });
+      this._container.querySelectorAll('[data-id]').forEach(el => {
+        el.addEventListener('click', e => { e.stopPropagation(); this._select(el.dataset.id); });
+      });
+    }
+
+    _toggle() { this._open = !this._open; this._render(); }
+    _select(id) {
+      this._selected = PROVIDERS.find(p => p.id === id) || this._selected;
+      this._open = false; this._render(); this._onChange(this._selected);
+    }
+    _onDocClick() { if (this._open) { this._open = false; this._render(); } }
+
+    get value() { return this._selected; }
+    destroy() { document.removeEventListener('click', this._onDocClick.bind(this)); this._container.innerHTML = ''; }
+  }
+
+  window.OasisProviderDropdown = OasisProviderDropdown;
+})();

package/src/purchase-oasis-nft.js

@@ -0,0 +1,54 @@
+/**
+ * OasisPurchaseOasisNft — purchase an OASIS NFT popup widget
+ * Usage: const w = new OasisPurchaseOasisNft({ nftId: '...', onSuccess: (tx) => {} }); w.open();
+ */
+class OasisPurchaseOasisNft {
+  constructor({ container, nftId = '', nftName = 'OASIS NFT', price = '0.00', currency = 'ETH', apiUrl = 'https://api.web4.oasisomniverse.one', onSuccess = null, onClose = null } = {}) {
+    this._nftId = nftId; this._nftName = nftName; this._price = price; this._currency = currency;
+    this._apiUrl = apiUrl; this._onSuccess = onSuccess; 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: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-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-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-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;width:100%}.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-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:16px}.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-price-big{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:700;color:#00c8ff;margin:4px 0}.oasis-nft-preview{text-align:center;padding:20px;background:rgba(0,200,255,.04);border-radius:10px;margin-bottom:20px;border:1px solid rgba(0,200,255,.1)}.oasis-nft-icon{font-size:56px;margin-bottom:8px}.oasis-nft-preview-name{font-size:15px;font-weight:700;color:#fff}.oasis-divider{border:none;border-top:1px solid rgba(0,200,255,.1);margin:16px 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">Purchase NFT</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-pnft-confirm').addEventListener('click', () => this._doPurchase());
+  }
+  _buildBody() {
+    return `<div class="oasis-nft-preview"><div class="oasis-nft-icon">🖼️</div><div class="oasis-nft-preview-name">${this._nftName}</div></div>
+    <div id="oasis-pnft-msg"></div>
+    <div class="oasis-info-block"><div class="oasis-info-label">Price</div><div class="oasis-price-big">${this._price} ${this._currency}</div></div>
+    <div class="oasis-field"><label class="oasis-label">Pay with</label><select class="oasis-select" id="oasis-pnft-wallet"><option value="metamask">MetaMask</option><option value="walletconnect">WalletConnect</option><option value="seeds">SEEDS Token</option></select></div>
+    <hr class="oasis-divider" />
+    <p style="color:#7a9bbf;font-size:12px;margin:0 0 16px">By confirming, you agree to the OASIS NFT Terms of Service. Transaction fees may apply.</p>
+    <button class="oasis-btn" id="oasis-pnft-confirm">Confirm Purchase</button>`;
+  }
+  async _doPurchase() {
+    const msgEl = this._overlay.querySelector('#oasis-pnft-msg');
+    const btn = this._overlay.querySelector('#oasis-pnft-confirm');
+    btn.textContent = 'Processing…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/nft/purchase`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nftId: this._nftId, wallet: this._overlay.querySelector('#oasis-pnft-wallet').value }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Purchase failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Purchase successful! NFT transferred to your wallet.</div>';
+      if (this._onSuccess) this._onSuccess(data);
+      btn.textContent = 'Purchased!';
+    } catch (e) { msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`; btn.textContent = 'Confirm Purchase'; 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.OasisPurchaseOasisNft = OasisPurchaseOasisNft;

package/src/purchase-oasis-virtual-land-nft.js

@@ -0,0 +1,54 @@
+/**
+ * OasisPurchaseOasisVirtualLandNft — purchase OASIS virtual land NFT popup widget
+ * Usage: const w = new OasisPurchaseOasisVirtualLandNft({ landId: '...' }); w.open();
+ */
+class OasisPurchaseOasisVirtualLandNft {
+  constructor({ container, landId = '', landName = 'Virtual Land', price = '0.00', currency = 'ETH', apiUrl = 'https://api.web4.oasisomniverse.one', onSuccess = null, onClose = null } = {}) {
+    this._landId = landId; this._landName = landName; this._price = price; this._currency = currency;
+    this._apiUrl = apiUrl; this._onSuccess = onSuccess; 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: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-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-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;width:100%;box-sizing:border-box}.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;width:100%}.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-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:16px}.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-price-big{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:700;color:#00c8ff}.oasis-land-preview{background:linear-gradient(135deg,rgba(0,200,80,.1),rgba(0,100,200,.1));border:1px solid rgba(0,200,80,.2);border-radius:12px;padding:24px;text-align:center;margin-bottom:20px}.oasis-land-icon{font-size:48px;margin-bottom:8px}.oasis-land-name{font-size:15px;font-weight:700;color:#fff}.oasis-divider{border:none;border-top:1px solid rgba(0,200,255,.1);margin:16px 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">Purchase Virtual Land</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-pvl-confirm').addEventListener('click', () => this._doPurchase());
+  }
+  _buildBody() {
+    return `<div class="oasis-land-preview"><div class="oasis-land-icon">🌍</div><div class="oasis-land-name">${this._landName}</div><div style="color:#7a9bbf;font-size:12px;margin-top:4px">Our World Virtual Land Parcel</div></div>
+    <div id="oasis-pvl-msg"></div>
+    <div class="oasis-info-block"><div class="oasis-info-label">Price</div><div class="oasis-price-big">${this._price} ${this._currency}</div></div>
+    <div class="oasis-field"><label class="oasis-label">Pay with</label><select class="oasis-select" id="oasis-pvl-wallet"><option value="metamask">MetaMask (ETH)</option><option value="solana">Solana Wallet</option><option value="seeds">SEEDS Token</option></select></div>
+    <hr class="oasis-divider" />
+    <p style="color:#7a9bbf;font-size:12px;margin:0 0 16px">Virtual land NFTs grant you ownership of a parcel in Our World. Transaction fees apply.</p>
+    <button class="oasis-btn" id="oasis-pvl-confirm">Purchase Land NFT</button>`;
+  }
+  async _doPurchase() {
+    const msgEl = this._overlay.querySelector('#oasis-pvl-msg');
+    const btn = this._overlay.querySelector('#oasis-pvl-confirm');
+    btn.textContent = 'Processing…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/nft/land/purchase`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ landId: this._landId, wallet: this._overlay.querySelector('#oasis-pvl-wallet').value }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Purchase failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Land NFT purchased! Welcome to Our World.</div>';
+      if (this._onSuccess) this._onSuccess(data);
+      btn.textContent = 'Purchased!';
+    } catch (e) { msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`; btn.textContent = 'Purchase Land NFT'; 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.OasisPurchaseOasisVirtualLandNft = OasisPurchaseOasisVirtualLandNft;

package/src/reset-password.js

@@ -0,0 +1,75 @@
+/**
+ * OasisResetPassword — set new password with token popup widget
+ * Usage: const w = new OasisResetPassword({ token: 'abc123', onSuccess: () => {} }); w.open();
+ */
+class OasisResetPassword {
+  constructor({ container, token = '', apiUrl = 'https://api.web4.oasisomniverse.one', onSuccess = null, onClose = null } = {}) {
+    this._token = token; this._apiUrl = apiUrl; this._onSuccess = onSuccess; 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: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-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{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;width:100%}.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-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-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-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">New Password</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-rp-submit').addEventListener('click', () => this._doReset());
+  }
+
+  _buildBody() {
+    return `
+      <div id="oasis-rp-msg"></div>
+      <div class="oasis-field"><label class="oasis-label">New Password</label><input class="oasis-input" id="oasis-rp-pass" type="password" placeholder="••••••••" /></div>
+      <div class="oasis-field"><label class="oasis-label">Confirm New Password</label><input class="oasis-input" id="oasis-rp-pass2" type="password" placeholder="••••••••" /></div>
+      <button class="oasis-btn" id="oasis-rp-submit">Set New Password</button>
+    `;
+  }
+
+  async _doReset() {
+    const pass = this._overlay.querySelector('#oasis-rp-pass').value;
+    const pass2 = this._overlay.querySelector('#oasis-rp-pass2').value;
+    const msgEl = this._overlay.querySelector('#oasis-rp-msg');
+    const btn = this._overlay.querySelector('#oasis-rp-submit');
+    if (!pass) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Please enter a new password.</div>'; return; }
+    if (pass !== pass2) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Passwords do not match.</div>'; return; }
+    btn.textContent = 'Saving…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/avatar/reset-password`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: this._token, password: pass }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Reset failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Password updated! You can now log in.</div>';
+      if (this._onSuccess) this._onSuccess();
+    } catch (e) {
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`;
+      btn.textContent = 'Set New Password'; 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.OasisResetPassword = OasisResetPassword;