@oasisomniverse/js 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,91 @@
+# @oasisomniverse/js — OASIS JavaScript UI Component Library
+
+The vanilla JavaScript UI component library for the [OASIS Platform](https://oasisomniverse.one). Drop 126 pre-built components into any website or web app to integrate avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — no framework required.
+
+[![npm](https://img.shields.io/npm/v/@oasisomniverse/js)](https://www.npmjs.com/package/@oasisomniverse/js)
+[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://oportal.oasisomniverse.one)
+
+## Install
+
+```bash
+npm install @oasisomniverse/js
+```
+
+Or via CDN:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@oasisomniverse/js/dist/oasis.min.js"></script>
+```
+
+## Basic Usage
+
+```js
+import { Login, AvatarConnect, KarmaToast } from '@oasisomniverse/js';
+
+// Initialise the OASIS API endpoint
+const config = { apiUrl: 'https://api.web4.oasisomniverse.one' };
+
+// Mount a login widget into a container element
+const login = new Login('#login-container', config);
+login.mount();
+
+// Show a karma toast notification
+const toast = new KarmaToast({ message: '+10 karma earned', value: 10 });
+toast.show();
+```
+
+## Component List
+
+All 126 components are grouped below. Every component is also available in React, Angular, Vue, Svelte and Next.js at full parity — see the [OASIS Web Component Library](https://oportal.oasisomniverse.one) for the full matrix.
+
+| Group | Components |
+|---|---|
+| **Auth & Identity** | AcceptInvite, AvatarConnect, ForgotPassword, Login, ResetPassword, SearchAvatar, SearchAvatars, SendInvite, Signup, VerifyEmail |
+| **Avatar** | AvatarProfile, AvatarWallet, EditAvatar, SearchProfiles, ViewAchievements, ViewAvatar, ViewAvatarKarma, ViewLeagues, ViewOrganizations, ViewTournaments |
+| **Data Screen** | ActivityPub, AddData, EOSIO, Ethereum, Holochain, IPFS, LoadData, ManageData, MongoDB, Neo4j, OffChainManagement, SearchData, Solana, Solid, SQLite, ThreeFold |
+| **Eggs** | Eggs, ManageEggs, SearchEggs, ViewEggs |
+| **Game** | Game |
+| **Karma** | KarmaPanel, KarmaToast, SearchKarma, ViewKarma, VoteKarma |
+| **Map** | Add2DObjectToMap, Add3DObjectToMap, AddQuestToMap, DownloadMap, ManageMap, Map, PlotRouteOnMap, SearchMap, ViewGlobal3DMap, ViewHalonsOnMap, ViewOAppOnMap, ViewQuestOnMap |
+| **Messages** | MenuMessage, Message, MessageContacts, Messaging |
+| **Mission** | ManageMission, Mission, SearchMission, ViewMission |
+| **NFT** | ContactPopupNFT, ManageNFT, NFT, PurchaseNFT, PurchaseVirtualLandNFT, SearchNFT, ViewNFT |
+| **OApp** | CreateOApp, DeployOApp, DownloadOApp, EditOApp, InstallOApp, LaunchOApp, ManageOApp, OApp, SearchOApp |
+| **Providers** | CompareProviderSpeeds, CrossChainManagement, ManageAutoFailover, ManageAutoReplication, ManageLoadBalancing, ManageProviders, ProviderDropdown, Providers, SearchProviders, SeedsProvider, ViewProviderStats, ViewProviders |
+| **Quest** | ManageQuest, Quest, SearchQuest, ViewQuest |
+| **Seeds** | DonateSeeds, ManageSeeds, PayWithSeeds, RewardSeeds, SearchSeeds, Seeds, ViewSeeds |
+| **Common UI** | ComingSoon, Confirmation, Contact, HyperDrive, NavBar, ONET, ONODE, OasisModal, Settings, SideNav, StarField, Wallet |
+
+## Dark Space Design System
+
+The OASIS component library ships with the **Dark Space** design system — a deep-space aesthetic built for the OASIS Omniverse:
+
+- **Background**: near-black (#0a0d14) with subtle nebula gradients
+- **Primary accent**: electric cyan (#00c8ff)
+- **Typography**: [Orbitron](https://fonts.google.com/specimen/Orbitron) for headings, [Rajdhani](https://fonts.google.com/specimen/Rajdhani) for body text
+- **Text**: always bright (#e0f0ff / #fff) — never dim or faded
+- **Borders**: translucent cyan (`rgba(0,200,255,0.2)`)
+- **Cards**: glassy dark panels with backdrop-filter blur
+
+All CSS custom properties are exposed on `:root` so you can theme components for your own OAPP.
+
+```css
+:root {
+  --oasis-bg: #0a0d14;
+  --oasis-accent: #00c8ff;
+  --oasis-text: #e0f0ff;
+  --oasis-border: rgba(0, 200, 255, 0.2);
+}
+```
+
+## Live Demo
+
+**[oportal.oasisomniverse.one](https://oportal.oasisomniverse.one)** — the JS OPORTAL running all 126 components live.
+
+## Links
+
+- [GitHub](https://github.com/NextGenSoftwareUK/OASIS-JS-UI-Component-Library)
+- [npm](https://www.npmjs.com/package/@oasisomniverse/js)
+- [OASIS API Docs](https://oasis-web4.gitbook.io/oasis-web4-docs/)
+- [Developer Portal](https://oportal.oasisomniverse.one)
+- [OASIS Platform](https://oasisomniverse.one)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@oasisomniverse/js",
-    "version":  "1.0.0",
+    "version":  "1.1.0",
     "description":  "OASIS Omniverse vanilla JS web component widgets",
     "keywords":  [
                      "oasis",

package/src/accept-invite.js

@@ -0,0 +1,17 @@
+class OasisAcceptInvite {
+  constructor({ inviteCode = '', onClose = null } = {}) { this._inviteCode = inviteCode; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#00a852,#00c864);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Accept SEEDS Invite</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><p style="color:#7a9bbf;font-size:13px;margin:0 0 20px">Enter your invite code to join the SEEDS regenerative economy and start earning karma.</p><div class="oasis-form-group"><label class="oasis-label">Invite Code</label><input class="oasis-input" value="${this._inviteCode}" placeholder="SEEDS invite code…"></div><div class="oasis-form-group"><label class="oasis-label">Your Name</label><input class="oasis-input" placeholder="Display name…"></div><button class="oasis-btn-primary">🌱 Accept Invite</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisAcceptInvite = OasisAcceptInvite;

package/src/activity-pub.js

@@ -0,0 +1,17 @@
+class OasisActivityPub {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">ActivityPub</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">📡</div><h3>ActivityPub</h3><p>Federated social networking via the ActivityPub protocol. Connect with Mastodon, Pleroma, and other Fediverse platforms.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisActivityPub = OasisActivityPub;

package/src/add-2d-object-map.js

@@ -0,0 +1,17 @@
+class OasisAdd2dObjectMap {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}.oasis-btn-primary:hover{opacity:.85}`; 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 2D Object to Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Object Name</label><input class="oasis-input" placeholder="e.g. Banner, Marker, Overlay…"></div><div class="oasis-form-group"><label class="oasis-label">Image URL</label><input class="oasis-input" placeholder="https://…"></div><div class="oasis-form-group"><label class="oasis-label">Latitude</label><input class="oasis-input" type="number" placeholder="51.5074"></div><div class="oasis-form-group"><label class="oasis-label">Longitude</label><input class="oasis-input" type="number" placeholder="-0.1278"></div><button class="oasis-btn-primary">Add to Map</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisAdd2dObjectMap = OasisAdd2dObjectMap;

package/src/add-3d-object-map.js

@@ -0,0 +1,17 @@
+class OasisAdd3dObjectMap {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Add 3D Object to Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Object Name</label><input class="oasis-input" placeholder="e.g. Building, Tree, Vehicle…"></div><div class="oasis-form-group"><label class="oasis-label">Model URL (.glb / .gltf)</label><input class="oasis-input" placeholder="https://…"></div><div class="oasis-form-group"><label class="oasis-label">Latitude</label><input class="oasis-input" type="number" placeholder="51.5074"></div><div class="oasis-form-group"><label class="oasis-label">Longitude</label><input class="oasis-input" type="number" placeholder="-0.1278"></div><div class="oasis-form-group"><label class="oasis-label">Altitude (m)</label><input class="oasis-input" type="number" placeholder="0"></div><button class="oasis-btn-primary">Add 3D Object</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisAdd3dObjectMap = OasisAdd3dObjectMap;

package/src/add-quest-to-map.js

@@ -0,0 +1,17 @@
+class OasisAddQuestToMap {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Add Quest to Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Quest ID</label><input class="oasis-input" placeholder="Enter quest ID…"></div><div class="oasis-form-group"><label class="oasis-label">Map Pin Title</label><input class="oasis-input" placeholder="e.g. Lost Artefact Quest…"></div><div class="oasis-form-group"><label class="oasis-label">Latitude</label><input class="oasis-input" type="number" placeholder="51.5074"></div><div class="oasis-form-group"><label class="oasis-label">Longitude</label><input class="oasis-input" type="number" placeholder="-0.1278"></div><button class="oasis-btn-primary">Pin Quest to Map</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisAddQuestToMap = OasisAddQuestToMap;

package/src/compare-provider-speeds.js

@@ -0,0 +1,17 @@
+class OasisCompareProviderSpeeds {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Compare Provider Speeds</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">⚡</div><h3>Compare Provider Speeds</h3><p>Benchmark and compare read/write speeds across all connected OASIS providers in real time.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisCompareProviderSpeeds = OasisCompareProviderSpeeds;

package/src/contact-popup-nft.js

@@ -0,0 +1,17 @@
+class OasisNftContactPopup {
+  constructor({ nftName = '', onClose = null } = {}) { this._nftName = nftName; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}textarea.oasis-input{min-height:100px;resize:vertical}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Contact NFT Owner</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._nftName ? `<p style="color:#7a9bbf;font-size:13px;margin:0 0 20px">Enquiring about: <strong style="color:#fff">${this._nftName}</strong></p>` : ''}<div class="oasis-form-group"><label class="oasis-label">Your Name</label><input class="oasis-input" placeholder="Avatar username…"></div><div class="oasis-form-group"><label class="oasis-label">Message</label><textarea class="oasis-input" placeholder="I'm interested in this NFT…"></textarea></div><button class="oasis-btn-primary">Send Message</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisNftContactPopup = OasisNftContactPopup;

package/src/create-oapp.js

@@ -0,0 +1,17 @@
+class OasisCreateOAPP {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}textarea.oasis-input{min-height:80px;resize:vertical}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Create OAPP</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">OAPP Name</label><input class="oasis-input" placeholder="My Awesome OAPP…"></div><div class="oasis-form-group"><label class="oasis-label">Description</label><textarea class="oasis-input" placeholder="What does your OAPP do?"></textarea></div><div class="oasis-form-group"><label class="oasis-label">Category</label><input class="oasis-input" placeholder="e.g. Game, Social, Finance…"></div><div class="oasis-form-group"><label class="oasis-label">Version</label><input class="oasis-input" placeholder="1.0.0"></div><button class="oasis-btn-primary">Create OAPP</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisCreateOAPP = OasisCreateOAPP;

package/src/deploy-oapp.js

@@ -0,0 +1,17 @@
+class OasisDeployOAPP {
+  constructor({ oappName = '', onClose = null } = {}) { this._oappName = oappName; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}.oasis-deploy-checklist{list-style:none;padding:0;margin:0 0 20px}.oasis-deploy-checklist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#fff;font-size:13px}.oasis-deploy-checklist li::before{content:'✅';font-size:14px}`; 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">Deploy OAPP</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body">${this._oappName?`<p style="color:#7a9bbf;font-size:13px;margin:0 0 16px">Deploying: <strong style="color:#fff">${this._oappName}</strong></p>`:''}<ul class="oasis-deploy-checklist"><li>Build validated</li><li>Dependencies resolved</li><li>OASIS API key set</li></ul><div class="oasis-form-group"><label class="oasis-label">Target Environment</label><input class="oasis-input" placeholder="production / staging…"></div><button class="oasis-btn-primary">🚀 Deploy Now</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisDeployOAPP = OasisDeployOAPP;

package/src/donate-seeds.js

@@ -0,0 +1,17 @@
+class OasisDonateSeeds {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}textarea.oasis-input{min-height:70px;resize:vertical}.oasis-btn-primary{background:linear-gradient(135deg,#00a852,#00c864);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Donate SEEDS</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Recipient</label><input class="oasis-input" placeholder="SEEDS account name…"></div><div class="oasis-form-group"><label class="oasis-label">Amount (SEEDS)</label><input class="oasis-input" type="number" min="0" placeholder="0.00"></div><div class="oasis-form-group"><label class="oasis-label">Note (optional)</label><textarea class="oasis-input" placeholder="What is this donation for?"></textarea></div><button class="oasis-btn-primary">🌱 Donate Seeds</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisDonateSeeds = OasisDonateSeeds;

package/src/download-our-world-map.js

@@ -0,0 +1,17 @@
+class OasisDownloadOurWorldMap {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:600;cursor:pointer}`; 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">Download Our World</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌍</div><h3>Our World — Free to Play</h3><p>Download the Our World augmented reality game and explore the OASIS Omniverse in the real world.</p><button class="oasis-btn-primary" onclick="window.open('https://www.ourworldthegame.com','_blank')">Download Our World</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisDownloadOurWorldMap = OasisDownloadOurWorldMap;

package/src/download-our-world-oapp.js

@@ -0,0 +1,17 @@
+class OasisDownloadOurWorldOApp {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:16px}.oasis-cs-icon{font-size:56px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:600;cursor:pointer}`; 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">Download Our World</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌍</div><h3>Our World OAPP</h3><p>Download the Our World OAPP to explore, build, and play in the OASIS Omniverse augmented reality experience.</p><button class="oasis-btn-primary" onclick="window.open('https://www.ourworldthegame.com','_blank')">Download Free</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisDownloadOurWorldOApp = OasisDownloadOurWorldOApp;

package/src/edit-oapp.js

@@ -0,0 +1,17 @@
+class OasisEditOAPP {
+  constructor({ oappId = '', onClose = null } = {}) { this._oappId = oappId; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}textarea.oasis-input{min-height:80px;resize:vertical}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Edit OAPP</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">OAPP Name</label><input class="oasis-input" placeholder="OAPP Name…" value="${this._oappId}"></div><div class="oasis-form-group"><label class="oasis-label">Description</label><textarea class="oasis-input" placeholder="Updated description…"></textarea></div><div class="oasis-form-group"><label class="oasis-label">Version</label><input class="oasis-input" placeholder="1.0.1"></div><button class="oasis-btn-primary">Save Changes</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisEditOAPP = OasisEditOAPP;

package/src/eosio.js

@@ -0,0 +1,17 @@
+class OasisEosio {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">EOSIO Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🟣</div><h3>EOSIO Provider</h3><p>EOSIO Delegated Proof of Stake blockchain integration. High throughput, zero transaction fees for OASIS operations.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisEosio = OasisEosio;

package/src/ethereum.js

@@ -0,0 +1,17 @@
+class OasisEthereum {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Ethereum Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">💎</div><h3>Ethereum Provider</h3><p>Ethereum blockchain integration for smart contracts, NFTs, and decentralised finance within the OASIS.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisEthereum = OasisEthereum;

package/src/game.js

@@ -0,0 +1,22 @@
+class OasisGame {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:640px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-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-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff}.oasis-btn-primary:hover{opacity:.85}.oasis-btn-secondary{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#00c8ff}.oasis-btn-secondary:hover{background:rgba(0,200,255,.2)}.oasis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:11px;color:#7a9bbf}.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-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`;
+    document.head.appendChild(s);
+  }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Game World</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid"><div class="oasis-card"><div class="oasis-card-title">🏆 Leagues</div><div class="oasis-card-sub">Competitive tiers</div></div><div class="oasis-card"><div class="oasis-card-title">🎯 Missions</div><div class="oasis-card-sub">Active quests</div></div><div class="oasis-card"><div class="oasis-card-title">⚔️ Tournaments</div><div class="oasis-card-sub">Scheduled events</div></div><div class="oasis-card"><div class="oasis-card-title">🌟 Achievements</div><div class="oasis-card-sub">Unlock rewards</div></div><div class="oasis-card"><div class="oasis-card-title">👤 Profiles</div><div class="oasis-card-sub">Find players</div></div><div class="oasis-card"><div class="oasis-card-title">📊 Leaderboard</div><div class="oasis-card-sub">Top avatars</div></div></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisGame = OasisGame;

package/src/holochain.js

@@ -0,0 +1,17 @@
+class OasisHolochain {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Holochain Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌀</div><h3>Holochain Provider</h3><p>Peer-to-peer distributed computing via Holochain. No central servers, no blockchain bottlenecks.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisHolochain = OasisHolochain;

package/src/hyperdrive.js

@@ -0,0 +1,17 @@
+class OasisHyperDrive {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:640px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-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">HyperDrive</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🚀</div><h3>HyperDrive</h3><p>Hyper-speed data transport layer for the OASIS. Enables blazing-fast cross-provider data replication and synchronisation.</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisHyperDrive = OasisHyperDrive;