@oasisomniverse/js 1.0.0

package/package.json

@@ -0,0 +1,36 @@
+{
+    "name":  "@oasisomniverse/js",
+    "version":  "1.0.0",
+    "description":  "OASIS Omniverse vanilla JS web component widgets",
+    "keywords":  [
+                     "oasis",
+                     "omniverse",
+                     "web-components",
+                     "javascript",
+                     "widgets"
+                 ],
+    "author":  "NextGenSoftware",
+    "license":  "MIT",
+    "repository":  {
+                       "type":  "git",
+                       "url":  "https://github.com/NextGenSoftwareUK/OASIS-JS-UI-Component-Library.git"
+                   },
+    "main":  "src/index.js",
+    "module":  "src/index.esm.js",
+    "exports":  {
+                    ".":  {
+                              "import":  "./src/index.esm.js",
+                              "require":  "./src/index.js"
+                          },
+                    "./widgets/*":  "./src/widgets/*.js"
+                },
+    "files":  [
+                  "src"
+              ],
+    "scripts":  {
+                    "build":  "node scripts/build.js"
+                },
+    "publishConfig":  {
+                          "access":  "public"
+                      }
+}

package/src/add-data.js

@@ -0,0 +1,54 @@
+/**
+ * OasisAddData — add off-chain or on-chain data entry popup widget
+ * Usage: const w = new OasisAddData({ onSave: (data) => {} }); w.open();
+ */
+class OasisAddData {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSave = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onSave = onSave; 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">Add 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'));
+    this._overlay.querySelector('#oasis-ad-save').addEventListener('click', () => this._doSave());
+  }
+  _buildBody() {
+    return `<div id="oasis-ad-msg"></div>
+    <div class="oasis-field"><label class="oasis-label">Key</label><input class="oasis-input" id="oasis-ad-key" type="text" placeholder="my.data.key" /></div>
+    <div class="oasis-field"><label class="oasis-label">Value</label><textarea class="oasis-textarea" id="oasis-ad-val" placeholder="Enter value (JSON, text, or any data)"></textarea></div>
+    <div class="oasis-field"><label class="oasis-label">Provider</label><select class="oasis-select" id="oasis-ad-prov"><option value="holochain">Holochain</option><option value="ethereum">Ethereum</option><option value="ipfs">IPFS</option><option value="mongodb">MongoDB</option><option value="neo4j">Neo4j</option></select></div>
+    <div class="oasis-field"><label class="oasis-label">Encrypt</label><select class="oasis-select" id="oasis-ad-enc"><option value="false">No</option><option value="true">Yes (AES-256)</option></select></div>
+    <div class="oasis-btn-row"><button class="oasis-btn-ghost" onclick="this.closest('.oasis-popup-overlay')?.remove()">Cancel</button><button class="oasis-btn" id="oasis-ad-save">Save Data</button></div>`;
+  }
+  async _doSave() {
+    const key = this._overlay.querySelector('#oasis-ad-key').value.trim();
+    const val = this._overlay.querySelector('#oasis-ad-val').value;
+    const msgEl = this._overlay.querySelector('#oasis-ad-msg');
+    const btn = this._overlay.querySelector('#oasis-ad-save');
+    if (!key) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Key is required.</div>'; return; }
+    btn.textContent = 'Saving…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/data`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key, value: val, providerType: this._overlay.querySelector('#oasis-ad-prov').value, encrypt: this._overlay.querySelector('#oasis-ad-enc').value === 'true' }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Save failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Data saved successfully!</div>';
+      if (this._onSave) this._onSave(data);
+    } catch (e) { msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`; btn.textContent = 'Save Data'; 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.OasisAddData = OasisAddData;

package/src/avatar-connect.js

@@ -0,0 +1,126 @@
+/**
+ * OasisAvatarConnect — login/logout toggle widget
+ * Renders a button that shows login state and opens an OasisModal with the login form.
+ * Usage:
+ *   const ac = new OasisAvatarConnect({ container: document.querySelector('#nav-auth') })
+ *   ac.destroy()
+ */
+class OasisAvatarConnect {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', sessionKey = 'oasis_session', onLogin = null, onLogout = null } = {}) {
+    this._container = container;
+    this._apiUrl = apiUrl;
+    this._sessionKey = sessionKey;
+    this._onLogin = onLogin;
+    this._onLogout = onLogout;
+    this._modal = null;
+    this._session = this._loadSession();
+    this._render();
+    this._injectStyles();
+  }
+
+  _loadSession() {
+    try { return JSON.parse(sessionStorage.getItem(this._sessionKey)); } catch { return null; }
+  }
+
+  _saveSession(sess) {
+    sessionStorage.setItem(this._sessionKey, JSON.stringify(sess));
+    this._session = sess;
+  }
+
+  _clearSession() {
+    sessionStorage.removeItem(this._sessionKey);
+    this._session = null;
+  }
+
+  _render() {
+    this._container.innerHTML = '';
+    if (this._session) {
+      const btn = document.createElement('div');
+      btn.className = 'oac-avatar-chip';
+      btn.innerHTML = `<span class="oac-avatar-icon">👤</span><span class="oac-username">${this._session.username}</span><span class="oac-karma">⚡ ${this._session.karma ?? 0}</span><button class="oac-logout-btn">Logout</button>`;
+      btn.querySelector('.oac-logout-btn').addEventListener('click', () => this._logout());
+      this._container.appendChild(btn);
+    } else {
+      const btn = document.createElement('button');
+      btn.className = 'oac-login-btn';
+      btn.textContent = 'Beam In';
+      btn.addEventListener('click', () => this._openLogin());
+      this._container.appendChild(btn);
+    }
+  }
+
+  _openLogin() {
+    const formHtml = `
+      <div class="oac-form" id="oac-login-form">
+        <div id="oac-error" class="oac-error" style="display:none"></div>
+        <div class="oac-field"><label class="oac-label">Username</label><input class="oac-input" id="oac-username" type="text" placeholder="yourusername" autocomplete="username" /></div>
+        <div class="oac-field"><label class="oac-label">Password</label><input class="oac-input" id="oac-password" type="password" placeholder="••••••••" autocomplete="current-password" /></div>
+        <button class="oac-submit-btn" id="oac-submit">Beam In</button>
+      </div>
+    `;
+    this._modal = new OasisModal({ title: 'Beam In', content: formHtml, accentColor: '#00c8ff' });
+    this._modal.open();
+    document.getElementById('oac-submit').addEventListener('click', () => this._doLogin());
+    document.getElementById('oac-password').addEventListener('keydown', e => { if (e.key === 'Enter') this._doLogin(); });
+  }
+
+  async _doLogin() {
+    const username = document.getElementById('oac-username').value.trim();
+    const password = document.getElementById('oac-password').value;
+    const errEl = document.getElementById('oac-error');
+    const btn = document.getElementById('oac-submit');
+    if (!username || !password) { errEl.textContent = 'Please fill in all fields.'; errEl.style.display = 'block'; return; }
+    btn.textContent = 'Connecting…'; btn.disabled = true; errEl.style.display = 'none';
+    try {
+      const { OASISClient } = await import('https://esm.sh/@oasisomniverse/web4-api@2.0.2');
+      const oasis = new OASISClient({ baseUrl: this._apiUrl });
+      const result = await oasis.auth.login({ username, password });
+      const karma = await oasis.karma.getKarmaForAvatar({ avatarId: result.avatarId });
+      this._saveSession({ avatarId: result.avatarId, username, karma: karma.total ?? 0 });
+      this._modal.close();
+      this._render();
+      if (this._onLogin) this._onLogin(this._session);
+    } catch (e) {
+      errEl.textContent = e?.message ?? 'Login failed. Please check your credentials.';
+      errEl.style.display = 'block';
+      btn.textContent = 'Beam In'; btn.disabled = false;
+    }
+  }
+
+  _logout() {
+    this._clearSession();
+    this._render();
+    if (this._onLogout) this._onLogout();
+  }
+
+  _injectStyles() {
+    if (document.getElementById('oac-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'oac-styles';
+    s.textContent = `
+      .oac-login-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:9px 18px;cursor:pointer;transition:opacity .2s}
+      .oac-login-btn:hover{opacity:.85}
+      .oac-avatar-chip{display:flex;align-items:center;gap:10px;background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:999px;padding:6px 14px 6px 10px;font-size:13px}
+      .oac-avatar-icon{font-size:18px}
+      .oac-username{color:#fff;font-weight:600}
+      .oac-karma{color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px}
+      .oac-logout-btn{background:none;border:1px solid rgba(255,100,100,.3);color:#ff8080;border-radius:6px;font-size:11px;padding:3px 8px;cursor:pointer;margin-left:4px}
+      .oac-form{display:flex;flex-direction:column;gap:16px}
+      .oac-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}
+      .oac-field{display:flex;flex-direction:column;gap:6px}
+      .oac-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}
+      .oac-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}
+      .oac-input:focus{border-color:rgba(0,200,255,.5)}
+      .oac-submit-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;padding:12px;cursor:pointer}
+      .oac-submit-btn:disabled{opacity:.5;cursor:not-allowed}
+    `;
+    document.head.appendChild(s);
+  }
+
+  destroy() {
+    this._modal?.destroy();
+    this._container.innerHTML = '';
+  }
+}
+
+window.OasisAvatarConnect = OasisAvatarConnect;

package/src/avatar-wallet.js

@@ -0,0 +1,60 @@
+/**
+ * OasisAvatarWallet — view avatar's linked wallets popup widget
+ * Usage: const w = new OasisAvatarWallet({ avatarId: '...' }); w.open();
+ */
+class OasisAvatarWallet {
+  constructor({ container, avatarId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._avatarId = avatarId; 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: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;word-break:break-all}.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">Avatar Wallet</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() {
+    return `
+      <div class="oasis-stat-row">
+        <div class="oasis-stat"><div class="oasis-stat-val">0.00</div><div class="oasis-stat-lbl">ETH Balance</div></div>
+        <div class="oasis-stat"><div class="oasis-stat-val">0</div><div class="oasis-stat-lbl">NFTs Held</div></div>
+        <div class="oasis-stat"><div class="oasis-stat-val">0</div><div class="oasis-stat-lbl">Seeds</div></div>
+      </div>
+      <p class="oasis-section-title">Linked Wallets</p>
+      <div class="oasis-info-block"><div class="oasis-info-label">Ethereum</div><div class="oasis-info-value">Not linked</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Solana</div><div class="oasis-info-value">Not linked</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Holochain</div><div class="oasis-info-value">Not linked</div></div>
+      <div class="oasis-btn-row"><button class="oasis-btn" style="width:auto" onclick="this.textContent='Coming Soon…'">Link Wallet</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(container) { container.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+
+window.OasisAvatarWallet = OasisAvatarWallet;

package/src/coming-soon.js

@@ -0,0 +1,35 @@
+/**
+ * OasisComingSoon — standalone Coming Soon widget
+ * Usage: new OasisComingSoon({ container, title, message })
+ */
+(function () {
+  const CSS = `
+.oasis-cs-shell{font-family:'Rajdhani',sans-serif;display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}
+.oasis-cs-icon{font-size:48px}
+.oasis-cs-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0}
+.oasis-cs-body{font-size:14px;color:#7a9bbf;line-height:1.6;margin:0;max-width:360px}
+.oasis-cs-badge{background:rgba(255,180,60,.12);border:1px solid rgba(255,180,60,.28);color:#ffb43c;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 14px;text-transform:uppercase}
+`;
+
+  class OasisComingSoon {
+    constructor({ container, title = 'Feature Coming Soon', message = 'This feature is currently under development and will be available soon.' } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisComingSoon: container not found');
+      if (!document.getElementById('oasis-cs-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-cs-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._container.innerHTML = `
+        <div class="oasis-cs-shell">
+          <div class="oasis-cs-icon">🚀</div>
+          <h2 class="oasis-cs-title">${title}</h2>
+          <p class="oasis-cs-body">${message}</p>
+          <div class="oasis-cs-badge">Coming Soon</div>
+        </div>`;
+    }
+
+    destroy() { this._container.innerHTML = ''; }
+  }
+
+  window.OasisComingSoon = OasisComingSoon;
+})();

package/src/confirmation.js

@@ -0,0 +1,53 @@
+/**
+ * OasisConfirmation — standalone Confirmation dialog widget
+ * Usage: new OasisConfirmation({ container, title, message, onConfirm, onCancel })
+ */
+(function () {
+  const CSS = `
+.oasis-conf-shell{font-family:'Rajdhani',sans-serif;display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;text-align:center}
+.oasis-conf-icon{font-size:44px}
+.oasis-conf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+.oasis-conf-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}
+.oasis-conf-actions{display:flex;gap:12px;margin-top:4px}
+.oasis-conf-btn{border:none;border-radius:8px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 24px;cursor:pointer;transition:opacity .2s}
+.oasis-conf-btn:hover{opacity:.85}
+.oasis-conf-btn--confirm{background:linear-gradient(135deg,#ff4444,#cc0000);color:#fff}
+.oasis-conf-btn--cancel{background:transparent;border:1px solid rgba(0,200,255,.3);color:#00c8ff}
+`;
+
+  class OasisConfirmation {
+    constructor({
+      container,
+      title = 'Are you sure?',
+      message = 'This action cannot be undone.',
+      icon = '⚠️',
+      confirmLabel = 'Confirm',
+      cancelLabel = 'Cancel',
+      onConfirm = () => {},
+      onCancel = () => {},
+    } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisConfirmation: container not found');
+      if (!document.getElementById('oasis-conf-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-conf-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._container.innerHTML = `
+        <div class="oasis-conf-shell">
+          <div class="oasis-conf-icon">${icon}</div>
+          <h2 class="oasis-conf-title">${title}</h2>
+          <p class="oasis-conf-body">${message}</p>
+          <div class="oasis-conf-actions">
+            <button class="oasis-conf-btn oasis-conf-btn--confirm" id="oasis-conf-confirm">${confirmLabel}</button>
+            <button class="oasis-conf-btn oasis-conf-btn--cancel" id="oasis-conf-cancel">${cancelLabel}</button>
+          </div>
+        </div>`;
+      document.getElementById('oasis-conf-confirm')?.addEventListener('click', onConfirm);
+      document.getElementById('oasis-conf-cancel')?.addEventListener('click', onCancel);
+    }
+
+    destroy() { this._container.innerHTML = ''; }
+  }
+
+  window.OasisConfirmation = OasisConfirmation;
+})();

package/src/contact.js

@@ -0,0 +1,84 @@
+/**
+ * OasisContact — standalone Contact form widget
+ * Usage: new OasisContact({ container: document.getElementById('contact') })
+ */
+(function () {
+  const CSS = `
+.oasis-contact-shell{font-family:'Rajdhani',sans-serif;display:flex;flex-direction:column;gap:18px}
+.oasis-contact-header{text-align:center}
+.oasis-contact-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+.oasis-contact-sub{font-size:13px;color:#7a9bbf;margin:0}
+.oasis-contact-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+.oasis-contact-field{display:flex;flex-direction:column;gap:6px}
+.oasis-contact-label{font-size:12px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}
+.oasis-contact-input,.oasis-contact-textarea{width:100%;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;box-sizing:border-box;font-family:inherit;transition:border-color .2s}
+.oasis-contact-input:focus,.oasis-contact-textarea:focus{border-color:rgba(0,200,255,.5)}
+.oasis-contact-textarea{resize:vertical;min-height:100px}
+.oasis-contact-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;padding:12px;cursor:pointer;transition:opacity .2s;width:100%}
+.oasis-contact-btn:disabled{opacity:.5;cursor:not-allowed}
+.oasis-contact-success{background:rgba(72,220,130,.12);border:1px solid rgba(72,220,130,.3);color:#48dc82;border-radius:8px;padding:10px 14px;font-size:13px}
+.oasis-contact-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}
+`;
+
+  class OasisContact {
+    constructor({ container } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisContact: container not found');
+      if (!document.getElementById('oasis-contact-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-contact-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._fields = { firstName: '', lastName: '', email: '', subject: '', message: '' };
+      this._loading = false;
+      this._sent = false;
+      this._error = '';
+      this._render();
+    }
+
+    _render() {
+      if (this._sent) {
+        this._container.innerHTML = `<div class="oasis-contact-shell"><div class="oasis-contact-header"><h2 class="oasis-contact-title">Contact Us</h2></div><div class="oasis-contact-success">✅ Message sent! We'll be in touch soon.</div></div>`;
+        return;
+      }
+      const f = this._fields;
+      this._container.innerHTML = `
+        <div class="oasis-contact-shell">
+          <div class="oasis-contact-header">
+            <h2 class="oasis-contact-title">✉️ Contact Us</h2>
+            <p class="oasis-contact-sub">Get in touch with the OASIS team.</p>
+          </div>
+          ${this._error ? `<div class="oasis-contact-error">${this._error}</div>` : ''}
+          <div class="oasis-contact-grid2">
+            <div class="oasis-contact-field"><label class="oasis-contact-label">First Name</label><input class="oasis-contact-input" data-field="firstName" value="${f.firstName}" placeholder="John" /></div>
+            <div class="oasis-contact-field"><label class="oasis-contact-label">Last Name</label><input class="oasis-contact-input" data-field="lastName" value="${f.lastName}" placeholder="Doe" /></div>
+          </div>
+          <div class="oasis-contact-field"><label class="oasis-contact-label">Email</label><input class="oasis-contact-input" type="email" data-field="email" value="${f.email}" placeholder="name@example.com" /></div>
+          <div class="oasis-contact-field"><label class="oasis-contact-label">Subject</label><input class="oasis-contact-input" data-field="subject" value="${f.subject}" placeholder="How can we help?" /></div>
+          <div class="oasis-contact-field"><label class="oasis-contact-label">Message</label><textarea class="oasis-contact-textarea" data-field="message" placeholder="Your message…">${f.message}</textarea></div>
+          <button class="oasis-contact-btn" id="oasis-contact-submit" ${this._loading ? 'disabled' : ''}>${this._loading ? 'Sending…' : 'Send Message'}</button>
+        </div>`;
+      this._container.querySelectorAll('[data-field]').forEach(el => {
+        el.addEventListener('input', () => { this._fields[el.dataset.field] = el.value; });
+      });
+      document.getElementById('oasis-contact-submit')?.addEventListener('click', () => this._submit());
+    }
+
+    async _submit() {
+      if (!this._fields.email || !this._fields.message) { this._error = 'Please fill in your email and message.'; this._render(); return; }
+      this._loading = true; this._error = ''; this._render();
+      try {
+        await fetch('https://formsubmit.co/ajax/davidellams@hotmail.com', {
+          method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+          body: JSON.stringify(this._fields),
+        });
+        this._sent = true;
+      } catch (e) { this._error = e?.message || 'Send failed. Please try again.'; }
+      this._loading = false;
+      this._render();
+    }
+
+    destroy() { this._container.innerHTML = ''; }
+  }
+
+  window.OasisContact = OasisContact;
+})();

package/src/cross-chain-management.js

@@ -0,0 +1,36 @@
+/**
+ * OasisCrossChainManagement — manage cross-chain data replication popup widget
+ * Usage: const w = new OasisCrossChainManagement({}); w.open();
+ */
+class OasisCrossChainManagement {
+  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">Cross-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 chains = [{ name: 'Ethereum', status: 'active' }, { name: 'Holochain', status: 'active' }, { name: 'IPFS', status: 'inactive' }, { name: 'Solana', status: 'inactive' }, { name: 'ThreeFold', status: 'inactive' }];
+    return `<p class="oasis-section-title">Chain Sync Status</p>
+    ${chains.map(c => `<div class="oasis-info-block" style="display:flex;align-items:center;justify-content:space-between"><div><div class="oasis-info-label">${c.name}</div><div class="oasis-info-value">Data replication ${c.status === 'active' ? 'enabled' : 'disabled'}</div></div><span class="oasis-badge ${c.status === 'active' ? 'oasis-badge-green' : 'oasis-badge-red'}">${c.status}</span></div>`).join('')}
+    <div style="text-align:right;margin-top:16px"><button class="oasis-btn" onclick="this.textContent='Syncing…';setTimeout(()=>this.textContent='Sync All',1500)">Sync All Chains</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.OasisCrossChainManagement = OasisCrossChainManagement;

package/src/edit-avatar.js

@@ -0,0 +1,79 @@
+/**
+ * OasisEditAvatar — edit avatar profile popup widget
+ * Usage: const w = new OasisEditAvatar({ avatarId: '...', onSave: (data) => {} }); w.open();
+ */
+class OasisEditAvatar {
+  constructor({ container, avatarId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onSave = null, onClose = null } = {}) {
+    this._avatarId = avatarId; this._apiUrl = apiUrl; this._onSave = onSave; 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-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">Edit Avatar</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-ea-save').addEventListener('click', () => this._doSave());
+  }
+
+  _buildBody() {
+    return `
+      <div id="oasis-ea-msg"></div>
+      <div class="oasis-grid-2">
+        <div class="oasis-field"><label class="oasis-label">First Name</label><input class="oasis-input" id="oasis-ea-first" type="text" placeholder="First" /></div>
+        <div class="oasis-field"><label class="oasis-label">Last Name</label><input class="oasis-input" id="oasis-ea-last" type="text" placeholder="Last" /></div>
+      </div>
+      <div class="oasis-field"><label class="oasis-label">Username</label><input class="oasis-input" id="oasis-ea-user" type="text" placeholder="username" /></div>
+      <div class="oasis-field"><label class="oasis-label">Email</label><input class="oasis-input" id="oasis-ea-email" type="email" placeholder="you@example.com" /></div>
+      <div class="oasis-field"><label class="oasis-label">Bio</label><textarea class="oasis-textarea" id="oasis-ea-bio" placeholder="Tell the world about yourself…"></textarea></div>
+      <div class="oasis-field"><label class="oasis-label">Avatar Image URL</label><input class="oasis-input" id="oasis-ea-img" type="url" placeholder="https://…" /></div>
+      <div class="oasis-btn-row"><button class="oasis-btn-ghost" onclick="this.closest('.oasis-popup-overlay')?.remove()">Cancel</button><button class="oasis-btn" id="oasis-ea-save">Save Changes</button></div>
+    `;
+  }
+
+  async _doSave() {
+    const f = (id) => this._overlay.querySelector(id)?.value.trim();
+    const msgEl = this._overlay.querySelector('#oasis-ea-msg');
+    const btn = this._overlay.querySelector('#oasis-ea-save');
+    btn.textContent = 'Saving…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/avatar/${this._avatarId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ firstName: f('#oasis-ea-first'), lastName: f('#oasis-ea-last'), username: f('#oasis-ea-user'), email: f('#oasis-ea-email'), description: f('#oasis-ea-bio'), avatarImageUrl: f('#oasis-ea-img') }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Save failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Avatar updated successfully!</div>';
+      if (this._onSave) this._onSave(data);
+      btn.textContent = 'Saved';
+    } catch (e) {
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`;
+      btn.textContent = 'Save Changes'; 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.OasisEditAvatar = OasisEditAvatar;