@oasisomniverse/js 1.0.0 → 1.1.0

package/src/index.esm.js

@@ -1,15 +1,143 @@
-// @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';
+// @oasisomniverse/js — ESM named re-exports
+// Each widget class is exported by name for tree-shaking
+
+export { OasisAvatarConnect }              from './avatar-connect.js';
+export { OasisAvatarWallet }               from './avatar-wallet.js';
+export { OasisComingSoon }                 from './coming-soon.js';
+export { OasisConfirmation }               from './confirmation.js';
+export { OasisContact }                    from './contact.js';
+export { OasisEggs }                       from './eggs.js';
+export { OasisForgotPassword }             from './forgot-password.js';
+export { OasisGame }                       from './game.js';
+export { OasisHyperDrive }                 from './hyperdrive.js';
+export { OasisKarmaPanel }                 from './karma-panel.js';
+export { OasisKarmaToast }                 from './karma-toast.js';
+export { OasisLogin }                      from './login.js';
+export { OasisMap }                        from './map.js';
+export { OasisMenuMessage }                from './menu-message.js';
+export { OasisMessaging }                  from './messaging.js';
+export { OasisMission }                    from './mission.js';
+export { OasisNavBar }                     from './navbar.js';
+export { OasisNFT }                        from './nft.js';
+export { OasisOApp }                       from './oapp.js';
+export { OasisOasisModal }                 from './oasis-modal.js';
+export { OasisONET }                       from './onet.js';
+export { OasisONODE }                      from './onode.js';
+export { OasisProviderDropdown }           from './provider-dropdown.js';
+export { OasisProviders }                  from './providers.js';
+export { OasisQuest }                      from './quest.js';
+export { OasisResetPassword }              from './reset-password.js';
+export { OasisSearchAvatars }              from './search-avatars.js';
+export { OasisSeeds }                      from './seeds.js';
+export { OasisSettings }                   from './settings.js';
+export { OasisSignup }                     from './signup.js';
+export { OasisStarField }                  from './star-field.js';
+export { OasisVerifyEmail }                from './verify-email.js';
+export { OasisWallet }                     from './wallet.js';
+
+// Avatar sub-components
+export { OasisEditAvatar }                 from './edit-avatar.js';
+export { OasisSearchAvatar }               from './search-avatar.js';
+export { OasisViewAvatar }                 from './view-avatar.js';
+
+// Data Screen sub-components
+export { OasisAddData }                    from './add-data.js';
+export { OasisCrossChainManagement }       from './cross-chain-management.js';
+export { OasisLoadData }                   from './load-data.js';
+export { OasisManageData }                 from './manage-data.js';
+export { OasisOffChainManagement }         from './off-chain-management.js';
+export { OasisSearchData }                 from './search-data.js';
+
+// Eggs sub-components
+export { OasisManageEggs }                 from './manage-eggs.js';
+export { OasisSearchEggs }                 from './search-eggs.js';
+export { OasisViewEggs }                   from './view-eggs.js';
+
+// Game sub-components
+export { OasisSearchProfiles }             from './search-profiles.js';
+export { OasisViewAchievements }           from './view-achievements.js';
+export { OasisViewLeagues }                from './view-leagues.js';
+export { OasisViewTournaments }            from './view-tournaments.js';
+
+// Karma sub-components
+export { OasisSearchKarma }                from './search-karma.js';
+export { OasisViewAvatarKarma }            from './view-avatar-karma.js';
+export { OasisViewKarma }                  from './view-karma.js';
+export { OasisVoteKarma }                  from './vote-karma.js';
+
+// Map sub-components
+export { OasisAdd2dObjectMap }             from './add-2d-object-map.js';
+export { OasisAdd3dObjectMap }             from './add-3d-object-map.js';
+export { OasisAddQuestToMap }              from './add-quest-to-map.js';
+export { OasisDownloadOurWorldMap }        from './download-our-world-map.js';
+export { OasisManageMap }                  from './manage-map.js';
+export { OasisPlotRouteOnMap }             from './plot-route-on-map.js';
+export { OasisSearchMap }                  from './search-map.js';
+export { OasisViewGlobal3dMap }            from './view-global-3d-map.js';
+export { OasisViewHalonsOnMap }            from './view-halons-on-map.js';
+export { OasisViewOappOnMap }              from './view-oapp-on-map.js';
+export { OasisViewQuestOnMap }             from './view-quest-on-map.js';
+
+// Messages sub-components
+export { OasisMessage }                    from './message.js';
+
+// Mission sub-components
+export { OasisManageMission }              from './manage-mission.js';
+export { OasisSearchMission }              from './search-mission.js';
+export { OasisViewMission }                from './view-mission.js';
+
+// NFT sub-components
+export { OasisNftContactPopup }            from './contact-popup-nft.js';
+export { OasisManageOasisNft }             from './manage-oasis-nft.js';
+export { OasisPurchaseOasisNft }           from './purchase-oasis-nft.js';
+export { OasisPurchaseOasisVirtualLandNft } from './purchase-oasis-virtual-land-nft.js';
+export { OasisSearchOasisNft }             from './search-oasis-nft.js';
+export { OasisSolana }                     from './solana.js';
+export { OasisViewOasisNft }               from './view-oasis-nft.js';
+
+// OApp sub-components
+export { OasisCreateOAPP }                 from './create-oapp.js';
+export { OasisDeployOAPP }                 from './deploy-oapp.js';
+export { OasisDownloadOurWorldOApp }       from './download-our-world-oapp.js';
+export { OasisEditOAPP }                   from './edit-oapp.js';
+export { OasisInstallOAPP }                from './install-oapp.js';
+export { OasisLaunchOAPP }                 from './launch-oapp.js';
+export { OasisManageOAPP }                 from './manage-oapp.js';
+export { OasisSearchOAPP }                 from './search-oapp.js';
+
+// Provider sub-components
+export { OasisActivityPub }                from './activity-pub.js';
+export { OasisCompareProviderSpeeds }      from './compare-provider-speeds.js';
+export { OasisEosio }                      from './eosio.js';
+export { OasisEthereum }                   from './ethereum.js';
+export { OasisHolochain }                  from './holochain.js';
+export { OasisIpfs }                       from './ipfs.js';
+export { OasisManageAutoFailOver }         from './manage-auto-fail-over.js';
+export { OasisManageAutoReplicaton }       from './manage-auto-replicaton.js';
+export { OasisManageLoadBalancing }        from './manage-load-balancing.js';
+export { OasisManageProviders }            from './manage-providers.js';
+export { OasisMongoDb }                    from './mongo-db.js';
+export { OasisNeo4j }                      from './neo4j.js';
+export { OasisSearchProviders }            from './search-providers.js';
+export { OasisSeedsProvider }              from './seeds-provider.js';
+export { OasisSolid }                      from './solid.js';
+export { OasisSqlLite }                    from './sql-lite.js';
+export { OasisThreeFold }                  from './three-fold.js';
+export { OasisViewProviders }              from './view-providers.js';
+export { OasisViewProviderStats }          from './view-provider-stats.js';
+
+// Quest sub-components
+export { OasisManageQuest }                from './manage-quest.js';
+export { OasisSearchQuest }                from './search-quest.js';
+export { OasisViewQuest }                  from './view-quest.js';
+
+// Seeds sub-components
+export { OasisAcceptInvite }               from './accept-invite.js';
+export { OasisDonateSeeds }                from './donate-seeds.js';
+export { OasisManageSeeds }                from './manage-seeds.js';
+export { OasisPayWithSeeds }               from './pay-with-seeds.js';
+export { OasisRewardSeeds }                from './reward-seeds.js';
+export { OasisSearchSeeds }                from './search-seeds.js';
+export { OasisSendInvite }                 from './send-invite.js';
+export { OasisViewOrganizations }          from './view-organizations.js';
+export { OasisViewSeeds }                  from './view-seeds.js';

package/src/index.js

@@ -1,15 +1,148 @@
 // @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';
+// Import this file to register all widgets on window.*
+
+// ── Auth ─────────────────────────────────────────────────────────────────────
+import './forgot-password.js';
+import './login.js';
+import './reset-password.js';
+import './signup.js';
+import './verify-email.js';
+
+// ── Layout / navigation ───────────────────────────────────────────────────────
+import './navbar.js';
+import './oasis-modal.js';
+import './star-field.js';
+
+// ── Avatar ────────────────────────────────────────────────────────────────────
+import './avatar-connect.js';
+import './avatar-wallet.js';
+import './edit-avatar.js';
+import './search-avatar.js';
+import './search-avatars.js';
+import './view-avatar.js';
+
+// ── Common popups ─────────────────────────────────────────────────────────────
+import './coming-soon.js';
+import './confirmation.js';
+import './contact.js';
+import './hyperdrive.js';
+import './menu-message.js';
+import './messaging.js';
+import './onet.js';
+import './onode.js';
+import './provider-dropdown.js';
+import './settings.js';
+import './wallet.js';
+
+// ── Data Screen ───────────────────────────────────────────────────────────────
+import './add-data.js';
+import './cross-chain-management.js';
+import './load-data.js';
+import './manage-data.js';
+import './off-chain-management.js';
+import './search-data.js';
+
+// ── Eggs ──────────────────────────────────────────────────────────────────────
+import './eggs.js';
+import './manage-eggs.js';
+import './search-eggs.js';
+import './view-eggs.js';
+
+// ── Game ──────────────────────────────────────────────────────────────────────
+import './game.js';
+import './search-profiles.js';
+import './view-achievements.js';
+import './view-leagues.js';
+import './view-tournaments.js';
+
+// ── Karma ─────────────────────────────────────────────────────────────────────
+import './karma-panel.js';
+import './karma-toast.js';
+import './search-karma.js';
+import './view-avatar-karma.js';
+import './view-karma.js';
+import './vote-karma.js';
+
+// ── Map ───────────────────────────────────────────────────────────────────────
+import './map.js';
+import './add-2d-object-map.js';
+import './add-3d-object-map.js';
+import './add-quest-to-map.js';
+import './download-our-world-map.js';
+import './manage-map.js';
+import './plot-route-on-map.js';
+import './search-map.js';
+import './view-global-3d-map.js';
+import './view-halons-on-map.js';
+import './view-oapp-on-map.js';
+import './view-quest-on-map.js';
+
+// ── Messages ──────────────────────────────────────────────────────────────────
+import './message.js';
+
+// ── Mission ───────────────────────────────────────────────────────────────────
+import './mission.js';
+import './manage-mission.js';
+import './search-mission.js';
+import './view-mission.js';
+
+// ── NFT ───────────────────────────────────────────────────────────────────────
+import './nft.js';
+import './contact-popup-nft.js';
+import './manage-oasis-nft.js';
+import './purchase-oasis-nft.js';
+import './purchase-oasis-virtual-land-nft.js';
+import './search-oasis-nft.js';
+import './solana.js';
+import './view-oasis-nft.js';
+
+// ── OApp ──────────────────────────────────────────────────────────────────────
+import './oapp.js';
+import './create-oapp.js';
+import './deploy-oapp.js';
+import './download-our-world-oapp.js';
+import './edit-oapp.js';
+import './install-oapp.js';
+import './launch-oapp.js';
+import './manage-oapp.js';
+import './search-oapp.js';
+
+// ── Providers ─────────────────────────────────────────────────────────────────
+import './providers.js';
+import './activity-pub.js';
+import './compare-provider-speeds.js';
+import './eosio.js';
+import './ethereum.js';
+import './holochain.js';
+import './ipfs.js';
+import './manage-auto-fail-over.js';
+import './manage-auto-replicaton.js';
+import './manage-load-balancing.js';
+import './manage-providers.js';
+import './mongo-db.js';
+import './neo4j.js';
+import './search-providers.js';
+import './seeds-provider.js';
+import './solid.js';
+import './sql-lite.js';
+import './three-fold.js';
+import './view-providers.js';
+import './view-provider-stats.js';
+
+// ── Quest ─────────────────────────────────────────────────────────────────────
+import './quest.js';
+import './manage-quest.js';
+import './search-quest.js';
+import './view-quest.js';
+
+// ── Seeds ─────────────────────────────────────────────────────────────────────
+import './seeds.js';
+import './accept-invite.js';
+import './donate-seeds.js';
+import './manage-seeds.js';
+import './pay-with-seeds.js';
+import './reward-seeds.js';
+import './search-seeds.js';
+import './send-invite.js';
+import './view-organizations.js';
+import './view-seeds.js';

package/src/install-oapp.js

@@ -0,0 +1,17 @@
+class OasisInstallOAPP {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; 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: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-search-row{display:flex;gap:8px;margin-bottom:16px}.oasis-input{flex:1;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}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}.oasis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:14px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:#00c8ff;background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:11px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:10px;color:#7a9bbf}.oasis-cs{text-align:center;padding:24px}.oasis-cs p{color:#7a9bbf;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">Install OAPP</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-search-row"><input class="oasis-input" id="oasis-install-q" placeholder="Search OAPPs to install…"><button class="oasis-btn-primary" id="oasis-install-btn">Search</button></div><div class="oasis-grid" id="oasis-install-grid"><div class="oasis-card"><div class="oasis-card-title">🎮 Game Hub</div><div class="oasis-card-sub">Games & tournaments</div></div><div class="oasis-card"><div class="oasis-card-title">💬 Chat</div><div class="oasis-card-sub">Avatar messaging</div></div><div class="oasis-card"><div class="oasis-card-title">🌱 Seeds Wallet</div><div class="oasis-card-sub">SEEDS economy</div></div><div class="oasis-card"><div class="oasis-card-title">🗺️ Map Explorer</div><div class="oasis-card-sub">Our World AR</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.OasisInstallOAPP = OasisInstallOAPP;

package/src/ipfs.js

@@ -0,0 +1,17 @@
+class OasisIpfs {
+  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">IPFS 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>IPFS Provider</h3><p>InterPlanetary File System integration for permanent, censorship-resistant content addressing in 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.OasisIpfs = OasisIpfs;

package/src/karma-panel.js

@@ -0,0 +1,28 @@
+class OasisKarmaPanel {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; 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-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-bar{background:rgba(255,255,255,.08);border-radius:999px;height:8px;margin:8px 0}.oasis-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#0066cc,#00c8ff)}.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}`; 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">Karma Panel</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-kp-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading karma…</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-kp-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/karma`);
+      const d = await r.json();
+      const total = d.total || 0; const max = d.max || 1000;
+      const pct = Math.min(100, Math.round((total / max) * 100));
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${total}</div><div class="oasis-stat-lbl">Total Karma</div></div><div class="oasis-stat"><div class="oasis-stat-val">${d.positive||0}</div><div class="oasis-stat-lbl">Positive</div></div><div class="oasis-stat"><div class="oasis-stat-val">${d.negative||0}</div><div class="oasis-stat-lbl">Negative</div></div></div><p style="font-size:11px;color:#7a9bbf;margin:0 0 6px">Progress (${pct}%)</p><div class="oasis-bar"><div class="oasis-bar-fill" style="width:${pct}%"></div></div>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load karma.</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(); }
+  destroy() { this.close(); }
+}
+window.OasisKarmaPanel = OasisKarmaPanel;

package/src/launch-oapp.js

@@ -0,0 +1,28 @@
+class OasisLaunchOAPP {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; 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: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-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-btn-sm{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer}.oasis-cs{text-align:center;padding:32px}.oasis-cs p{color:#7a9bbf;font-size:13px}.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">Launch OAPP</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-launch-body"><div class="oasis-cs"><p>Loading installed OAPPs…</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-launch-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/oapp/installed`);
+      const data = await r.json();
+      const oapps = Array.isArray(data) ? data : (data.result || []);
+      if (!oapps.length) { body.innerHTML = '<div class="oasis-cs"><p>No OAPPs installed. Install one first.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>OAPP</th><th>Version</th><th>Action</th></tr></thead><tbody>${oapps.map(o=>`<tr><td>${o.name||'—'}</td><td>${o.version||'—'}</td><td><button class="oasis-btn-sm">▶ Launch</button></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load OAPPs.</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(); }
+  destroy() { this.close(); }
+}
+window.OasisLaunchOAPP = OasisLaunchOAPP;

package/src/manage-auto-fail-over.js

@@ -0,0 +1,17 @@
+class OasisManageAutoFailOver {
+  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">Manage Auto Failover</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🔄</div><h3>Manage Auto Failover</h3><p>Configure automatic provider failover rules so the OASIS seamlessly switches providers on outage.</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.OasisManageAutoFailOver = OasisManageAutoFailOver;

package/src/manage-auto-replicaton.js

@@ -0,0 +1,17 @@
+class OasisManageAutoReplicaton {
+  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">Manage Auto Replication</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🔁</div><h3>Manage Auto Replication</h3><p>Set up automatic data replication across multiple providers for redundancy and availability.</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.OasisManageAutoReplicaton = OasisManageAutoReplicaton;

package/src/manage-load-balancing.js

@@ -0,0 +1,17 @@
+class OasisManageLoadBalancing {
+  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">Manage Load Balancing</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">⚖️</div><h3>Manage Load Balancing</h3><p>Distribute requests across providers intelligently to maximise throughput and minimise latency.</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.OasisManageLoadBalancing = OasisManageLoadBalancing;

package/src/manage-map.js

@@ -0,0 +1,17 @@
+class OasisManageMap {
+  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-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}`; 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 Map</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">🗑️ Remove Objects</div><div class="oasis-card-sub">Delete map items</div></div><div class="oasis-card"><div class="oasis-card-title">✏️ Edit Objects</div><div class="oasis-card-sub">Modify placed items</div></div><div class="oasis-card"><div class="oasis-card-title">🔒 Lock Region</div><div class="oasis-card-sub">Restrict access</div></div><div class="oasis-card"><div class="oasis-card-title">📊 Map Stats</div><div class="oasis-card-sub">Usage analytics</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.OasisManageMap = OasisManageMap;

package/src/manage-oapp.js

@@ -0,0 +1,28 @@
+class OasisManageOAPP {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; 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-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-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}.oasis-cs{text-align:center;padding:32px}.oasis-cs p{color:#7a9bbf;font-size:13px}.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">Manage OAPPs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-moapp-body"><div class="oasis-cs"><p>Loading…</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-moapp-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/oapp`);
+      const data = await r.json();
+      const oapps = Array.isArray(data) ? data : (data.result || []);
+      if (!oapps.length) { body.innerHTML = '<div class="oasis-cs"><p>No OAPPs found. Create one first.</p></div>'; return; }
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${oapps.length}</div><div class="oasis-stat-lbl">Total OAPPs</div></div><div class="oasis-stat"><div class="oasis-stat-val">${oapps.filter(o=>o.status==='live').length}</div><div class="oasis-stat-lbl">Live</div></div></div><table class="oasis-table"><thead><tr><th>Name</th><th>Version</th><th>Status</th></tr></thead><tbody>${oapps.map(o=>`<tr><td>${o.name||'—'}</td><td>${o.version||'—'}</td><td><span class="oasis-badge ${o.status==='live'?'oasis-badge-green':'oasis-badge-yellow'}">${o.status||'draft'}</span></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load OAPPs.</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(); }
+  destroy() { this.close(); }
+}
+window.OasisManageOAPP = OasisManageOAPP;

package/src/manage-providers.js

@@ -0,0 +1,17 @@
+class OasisManageProviders {
+  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">Manage Providers</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🔧</div><h3>Manage Providers</h3><p>Add, remove, and configure the storage and compute providers connected to your OASIS instance.</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.OasisManageProviders = OasisManageProviders;