@oasisomniverse/js 1.0.0

package/src/eggs.js

@@ -0,0 +1,88 @@
+/**
+ * OasisEggs — standalone Egg incubation widget
+ * Usage: new OasisEggs({ container: document.getElementById('eggs') })
+ */
+(function () {
+  const EGGS = [
+    { id: '1', name: 'Cosmic Egg', rarity: 'legendary', hatchProgress: 75, hatched: false, reward: '+500 Karma Companion' },
+    { id: '2', name: 'Forest Egg', rarity: 'common', hatchProgress: 100, hatched: true, reward: 'Woodland Sprite' },
+    { id: '3', name: 'Astral Egg', rarity: 'epic', hatchProgress: 30, hatched: false, reward: '+200 Karma Companion' },
+    { id: '4', name: 'Ocean Egg', rarity: 'rare', hatchProgress: 55, hatched: false, reward: 'Sea Guardian' },
+  ];
+  const RARITY_COLORS = { common: '#7a9bbf', rare: '#5ba8ff', epic: '#b87fff', legendary: '#ffb43c' };
+
+  const CSS = `
+.oasis-eggs-shell{font-family:'Rajdhani',sans-serif;display:flex;flex-direction:column;gap:20px}
+.oasis-eggs-header{text-align:center}
+.oasis-eggs-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+.oasis-eggs-sub{font-size:13px;color:#7a9bbf;margin:0}
+.oasis-eggs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
+.oasis-egg-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .2s}
+.oasis-egg-card:hover{border-color:rgba(0,200,255,.35)}
+.oasis-egg-card.hatched{border-color:rgba(255,180,60,.3);background:rgba(255,180,60,.04)}
+.oasis-egg-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}
+.oasis-egg-icon{font-size:40px}
+.oasis-egg-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;text-align:center}
+.oasis-egg-progress-wrap{width:100%;display:flex;flex-direction:column;gap:4px;align-items:center}
+.oasis-egg-progress-bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
+.oasis-egg-progress-fill{height:100%;background:linear-gradient(90deg,#00c8ff,#0080ff);border-radius:999px;transition:width .4s}
+.oasis-egg-pct{font-size:11px;color:#7a9bbf}
+.oasis-egg-btn{width:100%;background:linear-gradient(135deg,#ffb43c,#ff8c00);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:8px;cursor:pointer;transition:opacity .2s}
+.oasis-egg-btn:hover{opacity:.85}
+.oasis-egg-reward{font-size:12px;color:#ffb43c;font-weight:600;text-align:center}
+`;
+
+  class OasisEggs {
+    constructor({ container } = {}) {
+      this._container = typeof container === 'string' ? document.querySelector(container) : container;
+      if (!this._container) throw new Error('OasisEggs: container not found');
+      if (!document.getElementById('oasis-eggs-styles')) {
+        const s = document.createElement('style'); s.id = 'oasis-eggs-styles'; s.textContent = CSS;
+        document.head.appendChild(s);
+      }
+      this._eggs = EGGS.map(e => ({ ...e }));
+      this._render();
+    }
+
+    _render() {
+      this._container.innerHTML = `
+        <div class="oasis-eggs-shell">
+          <div class="oasis-eggs-header">
+            <h2 class="oasis-eggs-title">🥚 Eggs</h2>
+            <p class="oasis-eggs-sub">Hatch eggs to discover rare OASIS companions and rewards.</p>
+          </div>
+          <div class="oasis-eggs-grid">
+            ${this._eggs.map(e => `
+              <div class="oasis-egg-card${e.hatched ? ' hatched' : ''}" data-id="${e.id}">
+                <div class="oasis-egg-rarity" style="color:${RARITY_COLORS[e.rarity]};border-color:${RARITY_COLORS[e.rarity]}44">${e.rarity}</div>
+                <div class="oasis-egg-icon">${e.hatched ? '🐣' : '🥚'}</div>
+                <div class="oasis-egg-name">${e.name}</div>
+                ${e.hatched
+                  ? `<div class="oasis-egg-reward">✨ ${e.reward}</div>`
+                  : `<div class="oasis-egg-progress-wrap">
+                      <div class="oasis-egg-progress-bar"><div class="oasis-egg-progress-fill" style="width:${e.hatchProgress}%"></div></div>
+                      <div class="oasis-egg-pct">${e.hatchProgress}%</div>
+                    </div>
+                    <button class="oasis-egg-btn" data-incubate="${e.id}">Incubate</button>`}
+              </div>`).join('')}
+          </div>
+        </div>`;
+      this._container.querySelectorAll('[data-incubate]').forEach(btn => {
+        btn.addEventListener('click', () => this._incubate(btn.dataset.incubate));
+      });
+    }
+
+    _incubate(id) {
+      const e = this._eggs.find(x => x.id === id);
+      if (e && !e.hatched) {
+        e.hatchProgress = Math.min(100, e.hatchProgress + 25);
+        if (e.hatchProgress >= 100) e.hatched = true;
+        this._render();
+      }
+    }
+
+    destroy() { this._container.innerHTML = ''; }
+  }
+
+  window.OasisEggs = OasisEggs;
+})();

package/src/forgot-password.js

@@ -0,0 +1,73 @@
+/**
+ * OasisForgotPassword — request password reset popup widget
+ * Usage: const w = new OasisForgotPassword({ onClose: () => {} }); w.open();
+ */
+class OasisForgotPassword {
+  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: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;transition:color .2s}.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;width:100%}.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;text-underline-offset:2px}.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">Reset 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-fp-submit').addEventListener('click', () => this._doReset());
+  }
+
+  _buildBody() {
+    return `
+      <p style="color:#7a9bbf;font-size:13px;margin:0 0 20px">Enter your email address and we'll send you a link to reset your password.</p>
+      <div id="oasis-fp-msg"></div>
+      <div class="oasis-field"><label class="oasis-label">Email Address</label><input class="oasis-input" id="oasis-fp-email" type="email" placeholder="you@example.com" /></div>
+      <button class="oasis-btn" id="oasis-fp-submit">Send Reset Link</button>
+    `;
+  }
+
+  async _doReset() {
+    const email = this._overlay.querySelector('#oasis-fp-email').value.trim();
+    const msgEl = this._overlay.querySelector('#oasis-fp-msg');
+    const btn = this._overlay.querySelector('#oasis-fp-submit');
+    if (!email) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Please enter your email address.</div>'; return; }
+    btn.textContent = 'Sending…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/avatar/forgot-password`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Request failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Reset link sent! Check your inbox.</div>';
+      btn.textContent = 'Sent'; btn.disabled = true;
+    } catch (e) {
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`;
+      btn.textContent = 'Send Reset Link'; 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.OasisForgotPassword = OasisForgotPassword;

package/src/index.esm.js

@@ -0,0 +1,15 @@
+// @oasisomniverse/js — ESM re-exports
+// Each widget self-registers on window.* when imported.
+// You can also import the class directly: import { OasisNavBar } from '@oasisomniverse/js'
+
+export { OasisNavBar }       from './widgets/navbar.js';
+export { OasisModal }        from './widgets/oasis-modal.js';
+export { OasisContact }      from './widgets/contact.js';
+export { OasisConfirmation } from './widgets/confirmation.js';
+export { OasisComingSoon }   from './widgets/coming-soon.js';
+export { OasisKarmaToast }   from './widgets/karma-toast.js';
+export { OasisAvatarConnect } from './widgets/avatar-connect.js';
+export { OasisSeeds }        from './widgets/seeds.js';
+export { OasisEggs }         from './widgets/eggs.js';
+export { OasisStarField }    from './widgets/star-field.js';
+export { OasisProviderDropdown } from './widgets/provider-dropdown.js';

package/src/index.js

@@ -0,0 +1,15 @@
+// @oasisomniverse/js — OASIS Omniverse vanilla JS widgets
+// Load this file to register all widgets on window.*
+// Or import individual widgets from ./widgets/<name>.js
+
+import './widgets/avatar-connect.js';
+import './widgets/coming-soon.js';
+import './widgets/confirmation.js';
+import './widgets/contact.js';
+import './widgets/eggs.js';
+import './widgets/karma-toast.js';
+import './widgets/navbar.js';
+import './widgets/oasis-modal.js';
+import './widgets/provider-dropdown.js';
+import './widgets/seeds.js';
+import './widgets/star-field.js';

package/src/karma-toast.js

@@ -0,0 +1,50 @@
+/**
+ * OasisKarmaToast — floating karma notification
+ * Usage:
+ *   OasisKarmaToast.show({ message: 'Healed a patient', amount: 150 })
+ */
+const OasisKarmaToast = (() => {
+  let _el = null;
+  let _timer = null;
+
+  function _inject() {
+    if (document.getElementById('oasis-karma-toast')) return;
+    const el = document.createElement('div');
+    el.id = 'oasis-karma-toast';
+    el.innerHTML = `
+      <div class="okt-inner">
+        <span class="okt-icon">⚡</span>
+        <div>
+          <div class="okt-amount"></div>
+          <div class="okt-message"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(el);
+    _el = el;
+
+    const s = document.createElement('style');
+    s.textContent = `
+      #oasis-karma-toast{position:fixed;bottom:28px;right:28px;z-index:10000;pointer-events:none;transform:translateY(20px);opacity:0;transition:opacity .35s,transform .35s}
+      #oasis-karma-toast.is-visible{opacity:1;transform:none}
+      .okt-inner{display:flex;align-items:center;gap:12px;background:#0d1829;border:1px solid rgba(0,200,255,.25);border-radius:12px;padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
+      .okt-icon{font-size:22px}
+      .okt-amount{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;color:#00c8ff}
+      .okt-message{font-size:12px;color:#7a9bbf;margin-top:2px}
+    `;
+    document.head.appendChild(s);
+  }
+
+  function show({ message = '', amount = 0, duration = 4000 } = {}) {
+    _inject();
+    _el.querySelector('.okt-amount').textContent = `+${amount} Karma`;
+    _el.querySelector('.okt-message').textContent = message;
+    _el.classList.add('is-visible');
+    clearTimeout(_timer);
+    _timer = setTimeout(() => _el.classList.remove('is-visible'), duration);
+  }
+
+  return { show };
+})();
+
+window.OasisKarmaToast = OasisKarmaToast;

package/src/load-data.js

@@ -0,0 +1,56 @@
+/**
+ * OasisLoadData — load data from OASIS providers popup widget
+ * Usage: const w = new OasisLoadData({ onLoad: (data) => {} }); w.open();
+ */
+class OasisLoadData {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onLoad = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onLoad = onLoad; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus,.oasis-select:focus{border-color:rgba(0,200,255,.5)}.oasis-select option{background:#0a1628}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}.oasis-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}.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">Load 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-ld-btn').addEventListener('click', () => this._doLoad());
+  }
+  _buildBody() {
+    return `<div id="oasis-ld-msg"></div>
+    <div class="oasis-field"><label class="oasis-label">Data Key</label><input class="oasis-input" id="oasis-ld-key" type="text" placeholder="my.data.key" /></div>
+    <div class="oasis-field"><label class="oasis-label">Provider</label><select class="oasis-select" id="oasis-ld-prov"><option value="">Auto (fastest)</option><option value="holochain">Holochain</option><option value="ethereum">Ethereum</option><option value="ipfs">IPFS</option><option value="mongodb">MongoDB</option></select></div>
+    <div class="oasis-field"><label class="oasis-label">Decrypt</label><select class="oasis-select" id="oasis-ld-dec"><option value="true">Yes (if encrypted)</option><option value="false">No</option></select></div>
+    <button class="oasis-btn" id="oasis-ld-btn" style="width:100%">Load Data</button>
+    <div id="oasis-ld-output" style="margin-top:16px"></div>`;
+  }
+  async _doLoad() {
+    const key = this._overlay.querySelector('#oasis-ld-key').value.trim();
+    const msgEl = this._overlay.querySelector('#oasis-ld-msg');
+    const btn = this._overlay.querySelector('#oasis-ld-btn');
+    const out = this._overlay.querySelector('#oasis-ld-output');
+    if (!key) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Key is required.</div>'; return; }
+    btn.textContent = 'Loading…'; btn.disabled = true;
+    try {
+      const prov = this._overlay.querySelector('#oasis-ld-prov').value;
+      const r = await fetch(`${this._apiUrl}/api/data/${encodeURIComponent(key)}${prov ? '?provider=' + prov : ''}`);
+      const data = await r.json();
+      if (!r.ok || data.isError) throw new Error(data.message || 'Load failed');
+      out.innerHTML = `<div class="oasis-msg oasis-msg-success">Data loaded.</div><pre style="background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:8px;padding:12px;color:#fff;font-size:12px;overflow-x:auto;white-space:pre-wrap">${JSON.stringify(data.result ?? data, null, 2)}</pre>`;
+      if (this._onLoad) this._onLoad(data.result ?? data);
+    } catch (e) { msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`; }
+    btn.textContent = 'Load 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.OasisLoadData = OasisLoadData;

package/src/login.js

@@ -0,0 +1,154 @@
+/**
+ * OasisLogin — avatar login popup widget
+ * Usage: const w = new OasisLogin({ onSuccess: (session) => {} }); w.open();
+ */
+class OasisLogin {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSuccess = null, onClose = null } = {}) {
+    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;transition:color .2s}
+.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;width:100%}
+.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;transition:background .2s}
+.oasis-btn-ghost:hover{background:rgba(0,200,255,.2)}
+.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;letter-spacing:.04em}
+.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;text-underline-offset:2px}
+.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">Beam In</span><button class="oasis-popup-close" aria-label="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-login-msg"></div>
+      <div class="oasis-field"><label class="oasis-label">Username</label><input class="oasis-input" id="oasis-login-user" type="text" placeholder="yourusername" autocomplete="username" /></div>
+      <div class="oasis-field"><label class="oasis-label">Password</label><input class="oasis-input" id="oasis-login-pass" type="password" placeholder="••••••••" autocomplete="current-password" /></div>
+      <button class="oasis-btn" id="oasis-login-submit" style="margin-top:4px">Beam In</button>
+      <div style="text-align:center;margin-top:14px">
+        <button class="oasis-link" id="oasis-login-forgot">Forgot password?</button>
+      </div>
+    `;
+  }
+
+  _attachEvents() {
+    const submit = this._overlay.querySelector('#oasis-login-submit');
+    const passEl = this._overlay.querySelector('#oasis-login-pass');
+    if (submit) submit.addEventListener('click', () => this._doLogin());
+    if (passEl) passEl.addEventListener('keydown', e => { if (e.key === 'Enter') this._doLogin(); });
+  }
+
+  async _doLogin() {
+    const userEl = this._overlay.querySelector('#oasis-login-user');
+    const passEl = this._overlay.querySelector('#oasis-login-pass');
+    const msgEl = this._overlay.querySelector('#oasis-login-msg');
+    const btn = this._overlay.querySelector('#oasis-login-submit');
+    const username = userEl.value.trim();
+    const password = passEl.value;
+    if (!username || !password) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Please fill in all fields.</div>'; return; }
+    btn.textContent = 'Connecting…'; btn.disabled = true; msgEl.innerHTML = '';
+    try {
+      const res = await fetch(`${this._apiUrl}/api/avatar/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Login failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Logged in successfully!</div>';
+      if (this._onSuccess) this._onSuccess(data);
+      setTimeout(() => this.close(), 1200);
+    } catch (e) {
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`;
+      btn.textContent = 'Beam In'; 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.OasisLogin = OasisLogin;

package/src/manage-data.js

@@ -0,0 +1,42 @@
+/**
+ * OasisManageData — manage avatar data entries popup widget
+ * Usage: const w = new OasisManageData({}); w.open();
+ */
+class OasisManageData {
+  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:700px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus{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-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-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-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;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-red{background:rgba(255,80,80,.15);color:#ff6b6b}.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-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}.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 Data</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-md-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading data…</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-md-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/data`);
+      const data = await r.json();
+      const items = Array.isArray(data) ? data : (data.result || []);
+      if (!items.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">📦</div><h3>No Data</h3><p>No data entries found.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>Key</th><th>Provider</th><th>Encrypted</th><th>Actions</th></tr></thead><tbody>${items.map((i,idx) => `<tr><td>${i.key||'—'}</td><td>${i.provider||'—'}</td><td>${i.isEncrypted?'✓':'—'}</td><td><span class="oasis-badge oasis-badge-blue" data-del="${idx}">Delete</span></td></tr>`).join('')}</tbody></table>`;
+      body.querySelectorAll('[data-del]').forEach(b => b.addEventListener('click', () => { if (confirm('Delete this entry?')) fetch(`${this._apiUrl}/api/data/${items[+b.dataset.del].id}`, { method: 'DELETE' }).then(() => this._load()); }));
+    } catch { body.innerHTML = '<div class="oasis-msg oasis-msg-error">Failed to load data.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  _render(c) { c.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading…</p></div>'; }
+  destroy() { this.close(); }
+}
+window.OasisManageData = OasisManageData;

package/src/manage-eggs.js

@@ -0,0 +1,41 @@
+/**
+ * OasisManageEggs — manage OASIS Eggs popup widget
+ * Usage: const w = new OasisManageEggs({}); w.open();
+ */
+class OasisManageEggs {
+  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:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-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-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-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-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-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{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}`;
+    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 Eggs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-me-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading eggs…</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-me-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/avatar/eggs`);
+      const data = await r.json();
+      const eggs = Array.isArray(data) ? data : (data.result || []);
+      if (!eggs.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🥚</div><h3>No Eggs</h3><p>No eggs found in your inventory.</p></div>'; return; }
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${eggs.length}</div><div class="oasis-stat-lbl">Total Eggs</div></div><div class="oasis-stat"><div class="oasis-stat-val">${eggs.filter(e=>e.isHatched).length}</div><div class="oasis-stat-lbl">Hatched</div></div></div><table class="oasis-table"><thead><tr><th>Name</th><th>Type</th><th>Status</th><th>Actions</th></tr></thead><tbody>${eggs.map(e=>`<tr><td>${e.name||'Egg'}</td><td><span class="oasis-badge oasis-badge-blue">${e.eggType||'Unknown'}</span></td><td><span class="oasis-badge ${e.isHatched?'oasis-badge-green':'oasis-badge-yellow'}">${e.isHatched?'Hatched':'Incubating'}</span></td><td>${e.isHatched?'—':`<button class="oasis-badge oasis-badge-blue" onclick="alert('Hatch feature coming soon!')">Hatch</button>`}</td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg oasis-msg-error">Failed to load eggs.</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.OasisManageEggs = OasisManageEggs;

package/src/manage-mission.js

@@ -0,0 +1,42 @@
+/**
+ * OasisManageMission — manage avatar missions popup widget
+ * Usage: const w = new OasisManageMission({}); w.open();
+ */
+class OasisManageMission {
+  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}.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 Missions</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-mm-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading missions…</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-mm-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/mission`);
+      const data = await r.json();
+      const ms = Array.isArray(data) ? data : (data.result || []);
+      if (!ms.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🎯</div><h3>No Missions</h3><p>No missions assigned.</p></div>'; return; }
+      const active = ms.filter(m => m.status === 'active').length;
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${ms.length}</div><div class="oasis-stat-lbl">Total</div></div><div class="oasis-stat"><div class="oasis-stat-val">${active}</div><div class="oasis-stat-lbl">Active</div></div><div class="oasis-stat"><div class="oasis-stat-val">${ms.filter(m=>m.status==='completed').length}</div><div class="oasis-stat-lbl">Done</div></div></div><table class="oasis-table"><thead><tr><th>Mission</th><th>Type</th><th>Karma</th><th>Status</th></tr></thead><tbody>${ms.map(m=>`<tr><td>${m.name||'—'}</td><td><span class="oasis-badge oasis-badge-blue">${m.missionType||'—'}</span></td><td>+${m.karmaReward??0} ⚡</td><td><span class="oasis-badge ${m.status==='active'?'oasis-badge-green':m.status==='completed'?'oasis-badge-blue':'oasis-badge-yellow'}">${m.status||'—'}</span></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load missions.</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.OasisManageMission = OasisManageMission;