@oasisomniverse/angular 1.0.0

package/src/components/data-screen/cross-chain-management.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-cross-chain-management',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">⛓️</div>
+      <h2 class="popup-title">Cross Chain Management</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 CrossChainManagementComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/data-screen/load-data.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-load-data',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">📂</div>
+      <h2 class="popup-title">Load Data</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 LoadDataComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/data-screen/manage-data.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-manage-data',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🗄️</span><h2 class="mf-title">Manage Data</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Data Name</label><input class="mf-inp" [(ngModel)]="form['dataname']" placeholder="Data Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Data Type</label><input class="mf-inp" [(ngModel)]="form['datatype']" placeholder="Data Type..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Value</label><input class="mf-inp" [(ngModel)]="form['value']" placeholder="Value..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Provider</label><input class="mf-inp" [(ngModel)]="form['provider']" placeholder="Provider..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Access Level</label><input class="mf-inp" [(ngModel)]="form['accesslevel']" placeholder="Access Level..." /></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 ManageDataComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  form: Record<string,string> = {
+    'dataname': '',
+    'datatype': '',
+    'value': '',
+    'provider': '',
+    'accesslevel': ''
+  };
+  save() { this.close.emit(); }
+}

package/src/components/data-screen/off-chain-management.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-off-chain-management',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">🔗</div>
+      <h2 class="popup-title">Off-Chain Management</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 OffChainManagementComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/data-screen/search-data.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-search-data',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span class="sf-icon">🔍</span><h2 class="sf-title">Search Data</h2></div>
+      <div class="sf-row">
+        <input class="sf-input" [(ngModel)]="query" placeholder="Search by name, type or provider..." (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-icon{font-size:24px}
+    .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 SearchDataComponent {
+  @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/eggs/eggs.component.ts

@@ -0,0 +1,76 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Egg { id: string; name: string; rarity: string; hatchProgress: number; hatched: boolean; reward: string }
+
+@Component({
+  selector: 'oasis-eggs',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="eggs-shell">
+      <div class="eggs-header">
+        <h2 class="eggs-title">🥚 Eggs</h2>
+        <p class="eggs-sub">Hatch eggs to discover rare OASIS companions and rewards.</p>
+      </div>
+      <div class="eggs-grid">
+        @for (e of eggs(); track e.id) {
+          <div class="egg-card" [class.egg-card--hatched]="e.hatched">
+            <div class="egg-rarity egg-rarity--{{ e.rarity.toLowerCase() }}">{{ e.rarity }}</div>
+            <div class="egg-icon">{{ e.hatched ? '🐣' : '🥚' }}</div>
+            <div class="egg-name">{{ e.name }}</div>
+            @if (!e.hatched) {
+              <div class="egg-progress-wrap">
+                <div class="egg-progress-bar"><div class="egg-progress-fill" [style.width.%]="e.hatchProgress"></div></div>
+                <div class="egg-pct">{{ e.hatchProgress }}%</div>
+              </div>
+              <button class="egg-btn" (click)="incubate(e)">Incubate</button>
+            } @else {
+              <div class="egg-reward">✨ {{ e.reward }}</div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .eggs-shell{display:flex;flex-direction:column;gap:20px}
+    .eggs-header{text-align:center}
+    .eggs-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .eggs-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .eggs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
+    .egg-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .2s}
+    .egg-card:hover{border-color:rgba(0,200,255,.35)}
+    .egg-card--hatched{border-color:rgba(255,180,60,.3);background:rgba(255,180,60,.04)}
+    .egg-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}
+    .egg-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}
+    .egg-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}
+    .egg-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}
+    .egg-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}
+    .egg-icon{font-size:40px}
+    .egg-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;text-align:center}
+    .egg-progress-wrap{width:100%;display:flex;flex-direction:column;gap:4px;align-items:center}
+    .egg-progress-bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
+    .egg-progress-fill{height:100%;background:linear-gradient(90deg,#00c8ff,#0080ff);border-radius:999px;transition:width .4s}
+    .egg-pct{font-size:11px;color:#7a9bbf}
+    .egg-btn{width:100%;background:linear-gradient(135deg,#ffb43c,#ff8c00);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:8px;cursor:pointer;transition:opacity .2s}
+    .egg-btn:hover{opacity:.85}
+    .egg-reward{font-size:12px;color:#ffb43c;font-weight:600;text-align:center}
+  `]
+})
+export class EggsComponent {
+  eggs = signal<Egg[]>([
+    { id: '1', name: 'Cosmic Egg', rarity: 'Legendary', hatchProgress: 75, hatched: false, reward: '+500 Karma Companion' },
+    { id: '2', name: 'Forest Egg', rarity: 'Common', hatchProgress: 100, hatched: true, reward: 'Woodland Sprite' },
+    { id: '3', name: 'Astral Egg', rarity: 'Epic', hatchProgress: 30, hatched: false, reward: '+200 Karma Companion' },
+    { id: '4', name: 'Ocean Egg', rarity: 'Rare', hatchProgress: 55, hatched: false, reward: 'Sea Guardian' },
+  ]);
+
+  incubate(e: Egg) {
+    this.eggs.update(list => list.map(x => {
+      if (x.id !== e.id) return x;
+      const next = Math.min(100, x.hatchProgress + 25);
+      return { ...x, hatchProgress: next, hatched: next >= 100 };
+    }));
+  }
+}

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

@@ -0,0 +1,50 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-manage-eggs',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🥚</span><h2 class="mf-title">Manage Eggs</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Egg Name</label><input class="mf-inp" [(ngModel)]="form['eggname']" placeholder="Egg Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Rarity</label><input class="mf-inp" [(ngModel)]="form['rarity']" placeholder="Rarity..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Hatch Progress</label><input class="mf-inp" [(ngModel)]="form['hatchprogress']" placeholder="Hatch Progress..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Reward</label><input class="mf-inp" [(ngModel)]="form['reward']" placeholder="Reward..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Notes</label><input class="mf-inp" [(ngModel)]="form['notes']" placeholder="Notes..." /></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 ManageEggsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  form: Record<string,string> = {
+    'eggname': '',
+    'rarity': '',
+    'hatchprogress': '',
+    'reward': '',
+    'notes': ''
+  };
+  save() { this.close.emit(); }
+}

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

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-search-eggs',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span class="sf-icon">🔍</span><h2 class="sf-title">Search Eggs</h2></div>
+      <div class="sf-row">
+        <input class="sf-input" [(ngModel)]="query" placeholder="Search eggs by name or rarity..." (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-icon{font-size:24px}
+    .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 SearchEggsComponent {
+  @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/eggs/view-eggs.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-eggs',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="ve-shell">
+      <div class="ve-header"><span>🥚</span><h2 class="ve-title">View Eggs</h2></div>
+      <div class="ve-grid">
+        @for (e of eggs(); track e.name) {
+          <div class="ve-card" [class.ve-card--hatched]="e.hatched">
+            <div class="ve-rarity ve-rarity--{{ e.rarity.toLowerCase() }}">{{ e.rarity }}</div>
+            <div class="ve-emoji">{{ e.hatched ? '🐣' : '🥚' }}</div>
+            <div class="ve-name">{{ e.name }}</div>
+            <div class="ve-pct">{{ e.progress }}%</div>
+          </div>
+        }
+      </div>
+      <div class="ve-footer"><button class="ve-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .ve-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .ve-header{display:flex;align-items:center;gap:10px}
+    .ve-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .ve-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
+    .ve-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px}
+    .ve-card--hatched{border-color:rgba(255,180,60,.3);background:rgba(255,180,60,.04)}
+    .ve-rarity{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 8px;border:1px solid currentColor}
+    .ve-rarity--common{color:#7a9bbf}.ve-rarity--rare{color:#5ba8ff}.ve-rarity--epic{color:#b87fff}.ve-rarity--legendary{color:#ffb43c}
+    .ve-emoji{font-size:32px}
+    .ve-name{font-family:'Orbitron',sans-serif;font-size:11px;color:#fff;text-align:center}
+    .ve-pct{font-size:11px;color:#7a9bbf}
+    .ve-footer{display:flex;justify-content:flex-end}
+    .ve-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 ViewEggsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  eggs = signal([
+    { name: 'Cosmic Egg', rarity: 'Legendary', progress: 75, hatched: false },
+    { name: 'Forest Egg', rarity: 'Common', progress: 100, hatched: true },
+    { name: 'Astral Egg', rarity: 'Epic', progress: 30, hatched: false },
+    { name: 'Ocean Egg', rarity: 'Rare', progress: 55, hatched: false },
+  ]);
+}

package/src/components/forgot-password/forgot-password.component.ts

@@ -0,0 +1,80 @@
+import { Component, signal, Output, EventEmitter, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OasisService } from '../../services/oasis.service';
+
+@Component({
+  selector: 'oasis-forgot-password',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="oasis-auth-form">
+      <div class="oasis-auth-header">
+        <h2 class="oasis-auth-title">Forgot Password?</h2>
+        <p class="oasis-auth-sub">Enter your email and we'll send a reset link if the account exists.</p>
+      </div>
+
+      @if (error()) {
+        <div class="oasis-auth-error">{{ error() }}</div>
+      }
+
+      @if (!sent()) {
+        <div class="oasis-field">
+          <label class="oasis-label" for="fp-email">Email</label>
+          <input class="oasis-input" id="fp-email" type="email" [(ngModel)]="email" placeholder="name@example.com" autocomplete="email" required />
+        </div>
+        <button class="oasis-btn" type="button" [disabled]="loading()" (click)="submit()">
+          {{ loading() ? 'Sending…' : 'Send Reset Link' }}
+        </button>
+      } @else {
+        <div class="oasis-auth-success">
+          ✅ Reset link sent! Check your inbox.<br>
+          <a class="oasis-link" (click)="switchTo.emit('login')" href="javascript:void(0)" style="margin-top:8px;display:inline-block">Back to Login</a>
+        </div>
+      }
+
+      <a class="oasis-link oasis-link--small oasis-link--center" (click)="switchTo.emit('login')" href="javascript:void(0)">← Back to Login</a>
+    </div>
+  `,
+  styles: [`
+    .oasis-auth-form { display:flex; flex-direction:column; gap:20px; }
+    .oasis-auth-header { text-align:center; }
+    .oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:20px; color:#fff; margin:0 0 6px; }
+    .oasis-auth-sub { font-size:13px; color:#7a9bbf; margin:0; line-height:1.5; }
+    .oasis-auth-error { background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.3); color:#ff6b6b; border-radius:8px; padding:10px 14px; font-size:13px; }
+    .oasis-auth-success { background:rgba(72,220,130,.12); border:1px solid rgba(72,220,130,.3); color:#48dc82; border-radius:8px; padding:14px; font-size:13px; line-height:1.6; }
+    .oasis-field { display:flex; flex-direction:column; gap:6px; }
+    .oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+    .oasis-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:8px; padding:10px 14px; color:#fff; font-size:14px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+    .oasis-input:focus { border-color:rgba(0,200,255,.5); }
+    .oasis-link { color:#00c8ff; text-decoration:none; cursor:pointer; }
+    .oasis-link--small { font-size:12px; }
+    .oasis-link--center { text-align:center; }
+    .oasis-btn { background:linear-gradient(135deg,#00c8ff,#0080ff); border:none; border-radius:8px; color:#fff; font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; padding:12px; cursor:pointer; transition:opacity .2s; }
+    .oasis-btn:disabled { opacity:.5; cursor:not-allowed; }
+  `]
+})
+export class ForgotPasswordComponent {
+  @Output() switchTo = new EventEmitter<'login'>();
+
+  private oasis = inject(OasisService);
+
+  email = '';
+  loading = signal(false);
+  error = signal('');
+  sent = signal(false);
+
+  async submit() {
+    if (!this.email) { this.error.set('Please enter your email address.'); return; }
+    this.loading.set(true);
+    this.error.set('');
+    try {
+      await this.oasis.forgotPassword(this.email);
+      this.sent.set(true);
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Request failed. Please try again.');
+    } finally {
+      this.loading.set(false);
+    }
+  }
+}

package/src/components/game/game.component.ts

@@ -0,0 +1,58 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Game { id: string; name: string; genre: string; description: string; players: number; karma: number; icon: string; playing: boolean }
+
+@Component({
+  selector: 'oasis-game',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="game-shell">
+      <div class="game-header"><h2 class="game-title">🎮 Games</h2><p class="game-sub">Play games in the OASIS to earn karma and rewards.</p></div>
+      <div class="game-grid">
+        @for (g of games(); track g.id) {
+          <div class="game-card" [class.game-card--playing]="g.playing">
+            <div class="game-icon">{{ g.icon }}</div>
+            <div class="game-genre">{{ g.genre }}</div>
+            <div class="game-name">{{ g.name }}</div>
+            <div class="game-desc">{{ g.description }}</div>
+            <div class="game-meta">
+              <div class="game-players">👥 {{ g.players.toLocaleString() }}</div>
+              <div class="game-karma">+{{ g.karma }} karma/hr</div>
+            </div>
+            <button class="game-btn" [class.game-btn--stop]="g.playing" (click)="toggle(g)">{{ g.playing ? '⏹ Stop' : '▶ Play' }}</button>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .game-shell{display:flex;flex-direction:column;gap:18px}
+    .game-header{text-align:center}
+    .game-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .game-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
+    .game-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s}
+    .game-card:hover{border-color:rgba(0,200,255,.3)}
+    .game-card--playing{border-color:rgba(0,200,255,.5);background:rgba(0,200,255,.05)}
+    .game-icon{font-size:40px}
+    .game-genre{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5ba8ff}
+    .game-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .game-desc{font-size:12px;color:#7a9bbf;line-height:1.5;flex:1}
+    .game-meta{display:flex;justify-content:space-between}
+    .game-players{font-size:11px;color:#7a9bbf}
+    .game-karma{font-size:11px;color:#48dc82;font-weight:600}
+    .game-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:9px;cursor:pointer;transition:opacity .2s;margin-top:4px}
+    .game-btn--stop{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}
+  `]
+})
+export class GameComponent {
+  games = signal<Game[]>([
+    { id: '1', name: 'Karma Wars', genre: 'Strategy', description: 'Battle other avatars for karma dominance in real-time.', players: 12450, karma: 50, icon: '⚔️', playing: false },
+    { id: '2', name: 'Seed Garden', genre: 'Simulation', description: 'Grow and cultivate a virtual garden to earn seeds and karma.', players: 8900, karma: 30, icon: '🌱', playing: false },
+    { id: '3', name: 'OASIS Racer', genre: 'Racing', description: 'Race across virtual worlds and earn speed karma.', players: 5600, karma: 40, icon: '🏎️', playing: false },
+    { id: '4', name: 'NFT Quest', genre: 'RPG', description: 'An epic RPG adventure to discover legendary NFTs.', players: 22000, karma: 80, icon: '🗡️', playing: false },
+  ]);
+  toggle(g: Game) { this.games.update(l => l.map(x => x.id === g.id ? { ...x, playing: !x.playing } : x)); }
+}

package/src/components/game/search-profiles.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-profiles',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🎮</span><h2 class="sf-title">Search Profiles</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search by avatar name or game..." (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 SearchProfilesComponent {
+  @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/game/view-achievements.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-achievements',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="ach-shell">
+      <div class="ach-header"><span>🏆</span><h2 class="ach-title">Achievements</h2></div>
+      <div class="ach-list">
+        @for (a of achievements(); track a.id) {
+          <div class="ach-row" [class.ach-row--unlocked]="a.unlocked">
+            <div class="ach-badge">{{ a.unlocked ? a.icon : '🔒' }}</div>
+            <div class="ach-info"><div class="ach-name">{{ a.name }}</div><div class="ach-desc">{{ a.description }}</div></div>
+            <div class="ach-xp">+{{ a.xp }} XP</div>
+          </div>
+        }
+      </div>
+      <div class="ach-footer"><button class="ach-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .ach-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .ach-header{display:flex;align-items:center;gap:10px}
+    .ach-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .ach-list{display:flex;flex-direction:column;gap:8px}
+    .ach-row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 16px;opacity:.5;transition:opacity .2s}
+    .ach-row--unlocked{opacity:1;border-color:rgba(0,200,255,.2)}
+    .ach-badge{font-size:28px;flex-shrink:0}
+    .ach-info{flex:1}
+    .ach-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .ach-desc{font-size:12px;color:#7a9bbf;margin-top:2px}
+    .ach-xp{font-size:12px;color:#ffb43c;font-weight:700;flex-shrink:0}
+    .ach-footer{display:flex;justify-content:flex-end}
+    .ach-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 ViewAchievementsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  achievements = signal([
+    { id:1, icon:'⚔️', name:'First Quest', description:'Complete your first quest', xp:100, unlocked:true },
+    { id:2, icon:'🌟', name:'Star Collector', description:'Collect 100 stars', xp:250, unlocked:true },
+    { id:3, icon:'🏛️', name:'Hub Master', description:'Visit all OASIS hubs', xp:500, unlocked:false },
+    { id:4, icon:'🐉', name:'Dragon Slayer', description:'Defeat the cosmic dragon', xp:1000, unlocked:false },
+  ]);
+}