@oasisomniverse/angular 1.0.0

package/src/components/mission/manage-mission.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-mission',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🎯</span><h2 class="mf-title">Manage Mission</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Mission Name</label><input class="mf-inp" placeholder="Mission Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Description</label><input class="mf-inp" placeholder="Description..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Reward</label><input class="mf-inp" placeholder="Reward..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Difficulty</label><input class="mf-inp" placeholder="Difficulty..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Start Date</label><input class="mf-inp" placeholder="Start Date..." /></div>
+        <div class="mf-field"><label class="mf-lbl">End Date</label><input class="mf-inp" placeholder="End Date..." /></div>
+      </div>
+      <div class="mf-footer">
+        <button class="mf-save" (click)="save()">Save</button>
+        <button class="mf-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mf-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .mf-header{display:flex;align-items:center;gap:10px}
+    .mf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .mf-body{display:flex;flex-direction:column;gap:12px}
+    .mf-field{display:flex;flex-direction:column;gap:5px}
+    .mf-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .mf-inp{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .mf-inp:focus{border-color:rgba(0,200,255,.6)}
+    .mf-footer{display:flex;gap:10px;justify-content:flex-end}
+    .mf-save{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .mf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class ManageMissionComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/mission/mission.component.ts

@@ -0,0 +1,63 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Mission { id: string; title: string; description: string; reward: number; status: 'available' | 'active' | 'complete' }
+
+@Component({
+  selector: 'oasis-mission',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mis-shell">
+      <div class="mis-header"><h2 class="mis-title">🎯 Missions</h2><p class="mis-sub">Complete missions to earn karma and unlock rewards.</p></div>
+      <div class="mis-list">
+        @for (m of missions(); track m.id) {
+          <div class="mis-card mis-card--{{ m.status }}">
+            <div class="mis-left">
+              <div class="mis-title-text">{{ m.title }}</div>
+              <div class="mis-desc">{{ m.description }}</div>
+            </div>
+            <div class="mis-right">
+              <div class="mis-reward">+{{ m.reward }} karma</div>
+              <div class="mis-status-badge mis-status-badge--{{ m.status }}">{{ statusLabel(m.status) }}</div>
+              @if (m.status === 'available') { <button class="mis-btn" (click)="accept(m)">Accept</button> }
+              @if (m.status === 'active') { <button class="mis-btn mis-btn--complete" (click)="complete(m)">Complete</button> }
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mis-shell{display:flex;flex-direction:column;gap:18px}
+    .mis-header{text-align:center}
+    .mis-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .mis-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .mis-list{display:flex;flex-direction:column;gap:12px}
+    .mis-card{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px}
+    .mis-card--active{border-color:rgba(0,200,255,.35);background:rgba(0,200,255,.05)}
+    .mis-card--complete{border-color:rgba(72,220,130,.25);background:rgba(72,220,130,.04);opacity:.7}
+    .mis-left{flex:1}
+    .mis-title-text{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:4px}
+    .mis-desc{font-size:12px;color:#7a9bbf;line-height:1.5}
+    .mis-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
+    .mis-reward{font-size:12px;color:#48dc82;font-weight:600;white-space:nowrap}
+    .mis-status-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}
+    .mis-status-badge--available{color:#7a9bbf;border-color:rgba(122,155,191,.3)}
+    .mis-status-badge--active{color:#00c8ff;border-color:rgba(0,200,255,.35)}
+    .mis-status-badge--complete{color:#48dc82;border-color:rgba(72,220,130,.3)}
+    .mis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:7px 16px;cursor:pointer;transition:opacity .2s;white-space:nowrap}
+    .mis-btn--complete{background:linear-gradient(135deg,#48dc82,#00aa55)}
+  `]
+})
+export class MissionComponent {
+  missions = signal<Mission[]>([
+    { id: '1', title: 'First Contact', description: 'Log into OASIS for the first time and explore the hub.', reward: 100, status: 'complete' },
+    { id: '2', title: 'Karma Cultivator', description: 'Earn 500 karma through positive actions in the OASIS.', reward: 250, status: 'active' },
+    { id: '3', title: 'NFT Hunter', description: 'Acquire your first rare NFT from the marketplace.', reward: 400, status: 'available' },
+    { id: '4', title: 'Seed Planter', description: 'Plant 3 seeds and nurture them to full growth.', reward: 150, status: 'available' },
+  ]);
+  statusLabel(s: string) { return s === 'available' ? 'Available' : s === 'active' ? 'In Progress' : 'Complete'; }
+  accept(m: Mission) { this.missions.update(l => l.map(x => x.id === m.id ? { ...x, status: 'active' } : x)); }
+  complete(m: Mission) { this.missions.update(l => l.map(x => x.id === m.id ? { ...x, status: 'complete' } : x)); }
+}

package/src/components/mission/search-mission.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-search-mission',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🔍</span><h2 class="sf-title">Search Missions</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search missions by name or type..." (keyup.enter)="search()" /><button class="sf-btn" (click)="search()">Search</button></div>
+      @for (r of results(); track r) { <div class="sf-result">{{ r }}</div> }
+      <div class="sf-footer"><button class="sf-cancel" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .sf-shell{display:flex;flex-direction:column;gap:14px;padding:20px}
+    .sf-header{display:flex;align-items:center;gap:10px}
+    .sf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .sf-row{display:flex;gap:10px}
+    .sf-input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .sf-input:focus{border-color:rgba(0,200,255,.6)}
+    .sf-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 20px;cursor:pointer;white-space:nowrap}
+    .sf-result{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:8px;color:#c8dff0;font-size:13px;padding:10px 14px}
+    .sf-footer{display:flex;justify-content:flex-end}
+    .sf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:8px 20px;cursor:pointer}
+  `]
+})
+export class SearchMissionComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  query = '';
+  results = signal<string[]>([]);
+  search() { if (this.query.trim()) this.results.set(['No results found for "' + this.query + '"']); }
+}

package/src/components/mission/view-mission.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-mission',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vm-shell">
+      <div class="vm-header"><span>🎯</span><h2 class="vm-title">View Missions</h2></div>
+      <div class="vm-list">
+        @for (m of missions(); track m.id) {
+          <div class="vm-card">
+            <div class="vm-status vm-status--{{ m.status.toLowerCase() }}">{{ m.status }}</div>
+            <div class="vm-name">{{ m.name }}</div>
+            <div class="vm-desc">{{ m.description }}</div>
+            <div class="vm-meta"><span>Difficulty: {{ m.difficulty }}</span><span>Reward: {{ m.reward }}</span></div>
+          </div>
+        }
+      </div>
+      <div class="vm-footer"><button class="vm-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vm-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vm-header{display:flex;align-items:center;gap:10px}
+    .vm-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vm-list{display:flex;flex-direction:column;gap:10px}
+    .vm-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
+    .vm-status{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 10px;align-self:flex-start;border:1px solid currentColor}
+    .vm-status--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .vm-status--completed{color:#5ba8ff;border-color:rgba(91,168,255,.3)}
+    .vm-status--upcoming{color:#ffb43c;border-color:rgba(255,180,60,.3)}
+    .vm-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .vm-desc{font-size:12px;color:#a8bfd8;line-height:1.5}
+    .vm-meta{display:flex;gap:16px;font-size:11px;color:#7a9bbf}
+    .vm-footer{display:flex;justify-content:flex-end}
+    .vm-btn{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 22px;cursor:pointer}
+  `]
+})
+export class ViewMissionComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  missions = signal([
+    { id:1, name:'The Great Convergence', description:'Unite the three factions of the OASIS under one banner.', difficulty:'Hard', reward:'500 SEEDS', status:'Active' },
+    { id:2, name:'Data Recovery', description:'Recover lost data fragments scattered across the OASIS.', difficulty:'Medium', reward:'200 SEEDS', status:'Upcoming' },
+    { id:3, name:'First Contact', description:'Complete the introductory mission sequence.', difficulty:'Easy', reward:'50 SEEDS', status:'Completed' },
+  ]);
+}

package/src/components/modal/modal.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-modal',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (open) {
+      <div class="modal-backdrop" (click)="close.emit()">
+        <div class="modal-box" [style.border-color]="accentColor" (click)="$event.stopPropagation()">
+          <button class="modal-close" (click)="close.emit()">✕</button>
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
+  styles: [`
+    .modal-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(3,7,20,.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; }
+    .modal-box { background: #0a1535; border: 1px solid rgba(232,121,249,.25); border-radius: 20px; padding: 40px 36px; max-width: 520px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
+    .modal-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: #a8bfd8; font-size: 20px; cursor: pointer; line-height: 1; }
+  `]
+})
+export class ModalComponent {
+  @Input() open = false;
+  @Input() accentColor = 'rgba(232,121,249,.25)';
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/navbar/navbar.component.ts

@@ -0,0 +1,64 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AvatarConnectComponent } from '../avatar-connect/avatar-connect.component';
+
+@Component({
+  selector: 'oasis-navbar',
+  standalone: true,
+  imports: [CommonModule, AvatarConnectComponent],
+  template: `
+    <nav class="nav" [class.scrolled]="scrolled()">
+      <a class="nav-brand" href="#">
+        <span class="brand-icon">✦</span>
+        <span>GLOBAL <em>HEALING</em> NETWORK</span>
+      </a>
+      <button class="nav-toggle" [class.open]="menuOpen()" (click)="toggleMenu()" aria-label="Menu">
+        <span></span><span></span><span></span>
+      </button>
+      <ul class="nav-links" [class.open]="menuOpen()">
+        <li><a href="#mission" (click)="menuOpen.set(false)">Mission</a></li>
+        <li><a href="#pillars" (click)="menuOpen.set(false)">Pillars</a></li>
+        <li><a href="#live-beams" (click)="menuOpen.set(false)">Live Beams</a></li>
+        <li><a href="#submit-beam" (click)="menuOpen.set(false)">Submit Beam</a></li>
+        <li><a href="#groups" (click)="menuOpen.set(false)">Groups</a></li>
+        <li><a href="#archive" (click)="menuOpen.set(false)">Archive</a></li>
+        <li><a href="#forum" (click)="menuOpen.set(false)">Forum</a></li>
+        <li><a href="#healers" (click)="menuOpen.set(false)">Healers</a></li>
+        <li><a href="#map" (click)="menuOpen.set(false)">Map</a></li>
+        <li><a href="#ecosystem" (click)="menuOpen.set(false)">Ecosystem</a></li>
+      </ul>
+      <div class="nav-right">
+        <oasis-avatar-connect />
+      </div>
+    </nav>
+  `,
+  styles: [`
+    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; background: rgba(3,7,20,.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(232,121,249,.1); transition: padding .3s; }
+    .nav.scrolled { padding: 12px 40px; }
+    .nav-brand { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
+    .nav-brand .brand-icon { color: #e879f9; font-size: 16px; }
+    .nav-brand em { color: #e879f9; font-style: normal; }
+    .nav-links { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
+    .nav-links a { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .08em; color: #a8bfd8; text-decoration: none; transition: color .2s; text-transform: uppercase; }
+    .nav-links a:hover { color: #e879f9; }
+    .nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+    .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; }
+    .nav-toggle span { display: block; width: 100%; height: 2px; background: #a8bfd8; transition: transform .25s, opacity .25s; }
+    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+    .nav-toggle.open span:nth-child(2) { opacity: 0; }
+    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+    @media (max-width: 1100px) {
+      .nav-toggle { display: flex; }
+      .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw,320px); flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; padding: 76px 32px 24px; overflow-y: auto; background: rgba(3,7,20,.97); backdrop-filter: blur(12px); border-left: 1px solid rgba(232,121,249,.12); transform: translateX(100%); transition: transform .3s ease; }
+      .nav-links.open { transform: translateX(0); }
+      .nav { padding: 14px 20px; }
+    }
+  `],
+  host: { '(window:scroll)': 'onScroll()' }
+})
+export class NavbarComponent {
+  menuOpen = signal(false);
+  scrolled = signal(false);
+  toggleMenu() { this.menuOpen.set(!this.menuOpen()); }
+  onScroll() { this.scrolled.set(window.scrollY > 40); }
+}

package/src/components/nft/contact-popup.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-nft-contact-popup',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>📧</span><h2 class="mf-title">Contact NFT Creator</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Your Name</label><input class="mf-inp" placeholder="Your Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Email Address</label><input class="mf-inp" placeholder="Email Address..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Message</label><input class="mf-inp" placeholder="Message..." /></div>
+        <div class="mf-field"><label class="mf-lbl">NFT Reference</label><input class="mf-inp" placeholder="NFT Reference..." /></div>
+      </div>
+      <div class="mf-footer">
+        <button class="mf-save" (click)="save()">Save</button>
+        <button class="mf-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mf-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .mf-header{display:flex;align-items:center;gap:10px}
+    .mf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .mf-body{display:flex;flex-direction:column;gap:12px}
+    .mf-field{display:flex;flex-direction:column;gap:5px}
+    .mf-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .mf-inp{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .mf-inp:focus{border-color:rgba(0,200,255,.6)}
+    .mf-footer{display:flex;gap:10px;justify-content:flex-end}
+    .mf-save{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .mf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class NftContactPopupComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/nft/manage-oasis-nft.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-oasis-nft',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🎨</span><h2 class="mf-title">Manage OASIS NFT</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">NFT Name</label><input class="mf-inp" placeholder="NFT Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Description</label><input class="mf-inp" placeholder="Description..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Price</label><input class="mf-inp" placeholder="Price..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Royalty %</label><input class="mf-inp" placeholder="Royalty %..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Collection</label><input class="mf-inp" placeholder="Collection..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Blockchain</label><input class="mf-inp" placeholder="Blockchain..." /></div>
+      </div>
+      <div class="mf-footer">
+        <button class="mf-save" (click)="save()">Save</button>
+        <button class="mf-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mf-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .mf-header{display:flex;align-items:center;gap:10px}
+    .mf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .mf-body{display:flex;flex-direction:column;gap:12px}
+    .mf-field{display:flex;flex-direction:column;gap:5px}
+    .mf-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .mf-inp{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .mf-inp:focus{border-color:rgba(0,200,255,.6)}
+    .mf-footer{display:flex;gap:10px;justify-content:flex-end}
+    .mf-save{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .mf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class ManageOasisNftComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/nft/nft.component.ts

@@ -0,0 +1,70 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface NFT { id: string; name: string; rarity: string; type: string; karma: number; image: string }
+
+@Component({
+  selector: 'oasis-nft',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="nft-shell">
+      <div class="nft-header"><h2 class="nft-title">🖼️ NFTs</h2><p class="nft-sub">Your OASIS non-fungible token collection.</p></div>
+      <div class="nft-tabs">
+        @for (t of tabs; track t) {
+          <button class="nft-tab" [class.nft-tab--active]="activeTab() === t" (click)="activeTab.set(t)">{{ t }}</button>
+        }
+      </div>
+      <div class="nft-grid">
+        @for (n of filtered(); track n.id) {
+          <div class="nft-card">
+            <div class="nft-img">{{ n.image }}</div>
+            <div class="nft-rarity nft-rarity--{{ n.rarity.toLowerCase() }}">{{ n.rarity }}</div>
+            <div class="nft-name">{{ n.name }}</div>
+            <div class="nft-type">{{ n.type }}</div>
+            <div class="nft-karma">+{{ n.karma }} karma</div>
+          </div>
+        }
+        @if (filtered().length === 0) { <div class="nft-empty">No NFTs in this category.</div> }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .nft-shell{display:flex;flex-direction:column;gap:18px}
+    .nft-header{text-align:center}
+    .nft-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .nft-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .nft-tabs{display:flex;gap:8px;flex-wrap:wrap}
+    .nft-tab{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#7a9bbf;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:7px 16px;cursor:pointer;transition:all .2s}
+    .nft-tab--active{background:rgba(0,200,255,.15);border-color:#00c8ff;color:#00c8ff}
+    .nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
+    .nft-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s}
+    .nft-card:hover{border-color:rgba(0,200,255,.35)}
+    .nft-img{font-size:44px}
+    .nft-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}
+    .nft-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}
+    .nft-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}
+    .nft-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}
+    .nft-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}
+    .nft-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;text-align:center}
+    .nft-type{font-size:11px;color:#7a9bbf}
+    .nft-karma{font-size:12px;color:#48dc82;font-weight:600}
+    .nft-empty{grid-column:1/-1;text-align:center;color:#4a6a88;padding:32px;font-size:14px}
+  `]
+})
+export class NftComponent {
+  tabs = ['All', 'Avatar', 'Land', 'Item', 'Art'];
+  activeTab = signal('All');
+  nfts = signal<NFT[]>([
+    { id: '1', name: 'Cosmic Warrior', rarity: 'Legendary', type: 'Avatar', karma: 500, image: '⚔️' },
+    { id: '2', name: 'Forest Realm', rarity: 'Epic', type: 'Land', karma: 250, image: '🌲' },
+    { id: '3', name: 'Quantum Blade', rarity: 'Rare', type: 'Item', karma: 100, image: '🗡️' },
+    { id: '4', name: 'Nebula Portrait', rarity: 'Common', type: 'Art', karma: 30, image: '🎨' },
+    { id: '5', name: 'Light Keeper', rarity: 'Epic', type: 'Avatar', karma: 200, image: '🌟' },
+    { id: '6', name: 'Sky Citadel', rarity: 'Rare', type: 'Land', karma: 120, image: '🏰' },
+  ]);
+  filtered() {
+    const t = this.activeTab();
+    return t === 'All' ? this.nfts() : this.nfts().filter(n => n.type === t);
+  }
+}

package/src/components/nft/purchase-oasis-nft.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-purchase-oasis-nft',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pn-shell">
+      <div class="pn-header"><span>🛒</span><h2 class="pn-title">Purchase OASIS NFT</h2></div>
+      <div class="pn-list">
+        @for (nft of nfts(); track nft.id) {
+          <div class="pn-card" (click)="selected.set(nft.id)" [class.pn-card--sel]="selected()===nft.id">
+            <div class="pn-emoji">{{ nft.emoji }}</div>
+            <div class="pn-info"><div class="pn-name">{{ nft.name }}</div><div class="pn-price">{{ nft.price }}</div></div>
+          </div>
+        }
+      </div>
+      <div class="pn-footer">
+        <button class="pn-buy" [disabled]="!selected()" (click)="buy()">Purchase</button>
+        <button class="pn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .pn-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pn-header{display:flex;align-items:center;gap:10px}
+    .pn-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
+    .pn-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .2s}
+    .pn-card:hover{border-color:rgba(0,200,255,.3)}
+    .pn-card--sel{border-color:#00c8ff;background:rgba(0,200,255,.08)}
+    .pn-emoji{font-size:28px}
+    .pn-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff}
+    .pn-price{font-size:12px;color:#ffb43c;font-weight:700;margin-top:2px}
+    .pn-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pn-buy{background:linear-gradient(135deg,#ffb43c,#ff8c00);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .pn-buy:disabled{opacity:.4;cursor:not-allowed}
+    .pn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class PurchaseOasisNftComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  selected = signal<number|null>(null);
+  nfts = signal([
+    { id:1, emoji:'🏛️', name:'OASIS Hub Alpha', price:'0.05 ETH' },
+    { id:2, emoji:'🌌', name:'Cosmic Artifact', price:'0.12 ETH' },
+    { id:3, emoji:'🐉', name:'Dragon Companion', price:'0.25 ETH' },
+    { id:4, emoji:'💎', name:'Crystal Gem', price:'0.08 ETH' },
+  ]);
+  buy() { this.selected.set(null); this.close.emit(); }
+}

package/src/components/nft/purchase-oasis-virtual-land-nft.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-purchase-oasis-virtual-land-nft',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">🏞️</div>
+      <h2 class="popup-title">Purchase Virtual Land NFT</h2>
+      <p class="popup-body">UI Coming Soon — access this feature via the OASIS API from the Developer menu.</p>
+      <button class="popup-btn" (click)="close.emit()">OK</button>
+    </div>
+  `,
+  styles: [`
+    .popup-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
+    .popup-icon{font-size:48px}
+    .popup-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .popup-body{font-size:13px;color:#a8bfd8;line-height:1.6;margin:0;max-width:380px}
+    .popup-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer;transition:opacity .2s}
+    .popup-btn:hover{opacity:.85}
+  `]
+})
+export class PurchaseOasisVirtualLandNftComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/nft/search-oasis-nft.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-search-oasis-nft',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🔍</span><h2 class="sf-title">Search OASIS NFTs</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search NFTs by name, collection, or creator..." (keyup.enter)="search()" /><button class="sf-btn" (click)="search()">Search</button></div>
+      @for (r of results(); track r) { <div class="sf-result">{{ r }}</div> }
+      <div class="sf-footer"><button class="sf-cancel" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .sf-shell{display:flex;flex-direction:column;gap:14px;padding:20px}
+    .sf-header{display:flex;align-items:center;gap:10px}
+    .sf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .sf-row{display:flex;gap:10px}
+    .sf-input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .sf-input:focus{border-color:rgba(0,200,255,.6)}
+    .sf-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 20px;cursor:pointer;white-space:nowrap}
+    .sf-result{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:8px;color:#c8dff0;font-size:13px;padding:10px 14px}
+    .sf-footer{display:flex;justify-content:flex-end}
+    .sf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:8px 20px;cursor:pointer}
+  `]
+})
+export class SearchOasisNftComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  query = '';
+  results = signal<string[]>([]);
+  search() { if (this.query.trim()) this.results.set(['No results found for "' + this.query + '"']); }
+}

package/src/components/nft/solana.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-solana',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">◎</div>
+      <h2 class="popup-title">Solana Integration</h2>
+      <p class="popup-body">UI Coming Soon — access this feature via the OASIS API from the Developer menu.</p>
+      <button class="popup-btn" (click)="close.emit()">OK</button>
+    </div>
+  `,
+  styles: [`
+    .popup-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
+    .popup-icon{font-size:48px}
+    .popup-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .popup-body{font-size:13px;color:#a8bfd8;line-height:1.6;margin:0;max-width:380px}
+    .popup-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer;transition:opacity .2s}
+    .popup-btn:hover{opacity:.85}
+  `]
+})
+export class SolanaComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}