@oasisomniverse/angular 1.0.0

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

@@ -0,0 +1,78 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-seeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vs-shell">
+      <div class="vs-header"><span>🌱</span><h2 class="vs-title">View Seeds</h2></div>
+      <div class="vs-summary">
+        <div class="vs-stat"><div class="vs-stat-val">2,222</div><div class="vs-stat-lbl">Your Seeds</div></div>
+        <div class="vs-stat"><div class="vs-stat-val">777</div><div class="vs-stat-lbl">Karma</div></div>
+      </div>
+      <div class="vs-section">
+        <h3 class="vs-section-title">Seeds Sent</h3>
+        <div class="vs-table-wrap">
+          <table class="vs-table">
+            <thead><tr><th>Date</th><th>To Avatar</th><th>Amount</th><th>Type</th><th>Karma Earnt</th></tr></thead>
+            <tbody>
+              @for (tx of sent(); track tx.date) {
+                <tr><td>{{ tx.date }}</td><td>{{ tx.to }}</td><td>{{ tx.amount }}</td><td>{{ tx.type }}</td><td>+{{ tx.karma }}</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="vs-section">
+        <h3 class="vs-section-title">Seeds Received</h3>
+        <div class="vs-table-wrap">
+          <table class="vs-table">
+            <thead><tr><th>Date</th><th>From Avatar</th><th>Amount</th><th>Type</th><th>Karma Earnt</th></tr></thead>
+            <tbody>
+              @for (tx of received(); track tx.date) {
+                <tr><td>{{ tx.date }}</td><td>{{ tx.from }}</td><td>{{ tx.amount }}</td><td>{{ tx.type }}</td><td>+{{ tx.karma }}</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="vs-actions">
+        <button class="vs-action-btn" (click)="close.emit()">Pay with Seeds</button>
+        <button class="vs-action-btn" (click)="close.emit()">Donate with Seeds</button>
+        <button class="vs-action-btn" (click)="close.emit()">Reward with Seeds</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .vs-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vs-header{display:flex;align-items:center;gap:10px}
+    .vs-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vs-summary{display:flex;gap:16px}
+    .vs-stat{flex:1;background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px;text-align:center}
+    .vs-stat-val{font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;color:#00c8ff}
+    .vs-stat-lbl{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
+    .vs-section{display:flex;flex-direction:column;gap:8px}
+    .vs-section-title{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin:0}
+    .vs-table-wrap{overflow-x:auto;border:1px solid rgba(0,200,255,.1);border-radius:8px}
+    .vs-table{width:100%;border-collapse:collapse;font-size:12px}
+    .vs-table th{background:rgba(0,200,255,.06);color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.06em;padding:8px 10px;text-align:left;border-bottom:1px solid rgba(0,200,255,.1)}
+    .vs-table td{color:#c8dff0;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
+    .vs-table tr:last-child td{border-bottom:none}
+    .vs-actions{display:flex;gap:10px;flex-wrap:wrap}
+    .vs-action-btn{flex:1;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px;cursor:pointer;white-space:nowrap}
+  `]
+})
+export class ViewSeedsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  sent = signal([
+    { date:'2026-07-01', to:'StarWalker', amount:'50', type:'Gift', karma:5 },
+    { date:'2026-06-28', to:'NebulaDancer', amount:'100', type:'Reward', karma:10 },
+  ]);
+  received = signal([
+    { date:'2026-07-02', from:'CosmicSage', amount:'25', type:'Gift', karma:3 },
+    { date:'2026-06-30', from:'VoidWatcher', amount:'200', type:'Quest', karma:20 },
+  ]);
+}

package/src/components/settings/settings.component.ts

@@ -0,0 +1,96 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-settings',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sett-shell">
+      <div class="sett-header"><h2 class="sett-title">⚙️ Settings</h2><p class="sett-sub">Manage your OASIS account and preferences.</p></div>
+      <div class="sett-sections">
+        @for (sec of sections; track sec.label) {
+          <div class="sett-section" [class.sett-section--open]="openSection() === sec.label" (click)="openSection.set(openSection() === sec.label ? '' : sec.label)">
+            <div class="sett-section-header">
+              <span class="sett-section-icon">{{ sec.icon }}</span>
+              <span class="sett-section-label">{{ sec.label }}</span>
+              <span class="sett-chevron">{{ openSection() === sec.label ? '▲' : '▼' }}</span>
+            </div>
+            @if (openSection() === sec.label) {
+              <div class="sett-section-body">
+                @for (opt of sec.options; track opt.key) {
+                  <div class="sett-opt">
+                    <div class="sett-opt-info"><div class="sett-opt-name">{{ opt.name }}</div><div class="sett-opt-desc">{{ opt.desc }}</div></div>
+                    @if (opt.type === 'toggle') {
+                      <div class="sett-toggle" [class.sett-toggle--on]="prefs[opt.key]" (click)="prefs[opt.key] = !prefs[opt.key]">
+                        <div class="sett-toggle-knob"></div>
+                      </div>
+                    }
+                    @if (opt.type === 'select') {
+                      <select class="sett-select" [(ngModel)]="prefs[opt.key]">
+                        @for (c of opt.choices; track c) { <option [value]="c">{{ c }}</option> }
+                      </select>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+      </div>
+      <button class="oasis-btn" (click)="save()">{{ saved() ? '✅ Saved!' : 'Save Settings' }}</button>
+    </div>
+  `,
+  styles: [`
+    .sett-shell{display:flex;flex-direction:column;gap:18px}
+    .sett-header{text-align:center}
+    .sett-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .sett-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .sett-sections{display:flex;flex-direction:column;gap:8px}
+    .sett-section{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;overflow:hidden;transition:border-color .2s}
+    .sett-section--open{border-color:rgba(0,200,255,.3)}
+    .sett-section-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
+    .sett-section-icon{font-size:18px}
+    .sett-section-label{flex:1;font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .sett-chevron{font-size:10px;color:#7a9bbf}
+    .sett-section-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}
+    .sett-opt{display:flex;align-items:center;gap:14px}
+    .sett-opt-info{flex:1}
+    .sett-opt-name{font-size:13px;color:#e0f0ff}
+    .sett-opt-desc{font-size:11px;color:#4a6a88;margin-top:2px}
+    .sett-toggle{width:44px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);cursor:pointer;transition:background .2s;position:relative;flex-shrink:0}
+    .sett-toggle--on{background:linear-gradient(135deg,#00c8ff,#0080ff)}
+    .sett-toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
+    .sett-toggle--on .sett-toggle-knob{transform:translateX(20px)}
+    .sett-select{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:7px;color:#fff;font-size:12px;padding:6px 10px;outline:none}
+    .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}
+  `]
+})
+export class SettingsComponent {
+  openSection = signal('');
+  saved = signal(false);
+  prefs: Record<string, any> = {
+    notifications: true, darkMode: true, sound: false, autoSave: true,
+    language: 'English', theme: 'Dark Space', currency: 'ETH'
+  };
+  sections = [
+    { icon: '🔔', label: 'Notifications', options: [
+      { key: 'notifications', name: 'Enable Notifications', desc: 'Receive alerts for karma, messages and quests.', type: 'toggle' },
+      { key: 'sound', name: 'Sound Effects', desc: 'Play sounds for OASIS events.', type: 'toggle' },
+    ]},
+    { icon: '🎨', label: 'Appearance', options: [
+      { key: 'darkMode', name: 'Dark Mode', desc: 'Use the dark space theme.', type: 'toggle' },
+      { key: 'theme', name: 'Theme', desc: 'Select your OASIS visual theme.', type: 'select', choices: ['Dark Space', 'Neon City', 'Forest Realm'] },
+    ]},
+    { icon: '🌐', label: 'Language & Region', options: [
+      { key: 'language', name: 'Language', desc: 'Select your preferred language.', type: 'select', choices: ['English', 'Spanish', 'French', 'German', 'Japanese'] },
+      { key: 'currency', name: 'Display Currency', desc: 'Currency for prices and values.', type: 'select', choices: ['ETH', 'SOL', 'USD', 'GBP', 'EUR'] },
+    ]},
+    { icon: '💾', label: 'Data', options: [
+      { key: 'autoSave', name: 'Auto-save Progress', desc: 'Automatically save your OASIS progress.', type: 'toggle' },
+    ]},
+  ];
+
+  save() { this.saved.set(true); setTimeout(() => this.saved.set(false), 2000); }
+}

package/src/components/signup/signup.component.ts

@@ -0,0 +1,118 @@
+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-signup',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="oasis-auth-form">
+      <div class="oasis-auth-header">
+        <h2 class="oasis-auth-title">Sign Up</h2>
+        <p class="oasis-auth-sub">Already have an account? <a class="oasis-link" (click)="switchTo.emit('login')" href="javascript:void(0)">Beam In</a></p>
+      </div>
+
+      @if (error()) {
+        <div class="oasis-auth-error">{{ error() }}</div>
+      }
+      @if (success()) {
+        <div class="oasis-auth-success">Account created! <a class="oasis-link" (click)="switchTo.emit('login')" href="javascript:void(0)">Beam In</a></div>
+      }
+
+      @if (!success()) {
+        <div class="oasis-grid-2">
+          <div class="oasis-field">
+            <label class="oasis-label" for="su-first">First Name</label>
+            <input class="oasis-input" id="su-first" type="text" [(ngModel)]="firstName" placeholder="John" required />
+          </div>
+          <div class="oasis-field">
+            <label class="oasis-label" for="su-last">Last Name</label>
+            <input class="oasis-input" id="su-last" type="text" [(ngModel)]="lastName" placeholder="Doe" required />
+          </div>
+        </div>
+
+        <div class="oasis-grid-2">
+          <div class="oasis-field">
+            <label class="oasis-label" for="su-username">Username</label>
+            <input class="oasis-input" id="su-username" type="text" [(ngModel)]="username" placeholder="johndoe" autocomplete="username" required />
+          </div>
+          <div class="oasis-field">
+            <label class="oasis-label" for="su-email">Email</label>
+            <input class="oasis-input" id="su-email" type="email" [(ngModel)]="email" placeholder="name@example.com" autocomplete="email" required />
+          </div>
+        </div>
+
+        <div class="oasis-grid-2">
+          <div class="oasis-field">
+            <label class="oasis-label" for="su-pwd">Password</label>
+            <input class="oasis-input" id="su-pwd" type="password" [(ngModel)]="password" placeholder="min 6 characters" minlength="6" autocomplete="new-password" required />
+          </div>
+          <div class="oasis-field">
+            <label class="oasis-label" for="su-cpwd">Confirm Password</label>
+            <input class="oasis-input" id="su-cpwd" type="password" [(ngModel)]="confirmPassword" placeholder="••••••••" minlength="6" autocomplete="new-password" required />
+          </div>
+        </div>
+
+        <div class="oasis-field oasis-field--row">
+          <input class="oasis-checkbox" id="su-terms" type="checkbox" [(ngModel)]="acceptTerms" />
+          <label class="oasis-label oasis-label--inline" for="su-terms">I accept the Terms of Service</label>
+        </div>
+
+        <button class="oasis-btn" type="button" [disabled]="loading()" (click)="submit()">
+          {{ loading() ? 'Creating account…' : 'Create Account' }}
+        </button>
+      }
+    </div>
+  `,
+  styles: [`
+    .oasis-auth-form { display:flex; flex-direction:column; gap:18px; }
+    .oasis-auth-header { text-align:center; }
+    .oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:22px; color:#fff; margin:0 0 6px; }
+    .oasis-auth-sub { font-size:13px; color:#7a9bbf; margin:0; }
+    .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:10px 14px; font-size:13px; }
+    .oasis-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
+    .oasis-field { display:flex; flex-direction:column; gap:6px; }
+    .oasis-field--row { flex-direction:row; align-items:center; gap:10px; }
+    .oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+    .oasis-label--inline { text-transform:none; font-size:13px; color:#a8bfd8; }
+    .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-checkbox { width:16px; height:16px; accent-color:#00c8ff; cursor:pointer; flex-shrink:0; }
+    .oasis-link { color:#00c8ff; text-decoration:none; cursor:pointer; }
+    .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 SignupComponent {
+  @Output() switchTo = new EventEmitter<'login'>();
+
+  private oasis = inject(OasisService);
+
+  firstName = ''; lastName = ''; username = ''; email = '';
+  password = ''; confirmPassword = ''; acceptTerms = false;
+  loading = signal(false);
+  error = signal('');
+  success = signal(false);
+
+  async submit() {
+    if (!this.firstName || !this.lastName || !this.username || !this.email || !this.password) {
+      this.error.set('Please fill in all fields.'); return;
+    }
+    if (this.password !== this.confirmPassword) { this.error.set('Passwords do not match.'); return; }
+    if (this.password.length < 6) { this.error.set('Password must be at least 6 characters.'); return; }
+    if (!this.acceptTerms) { this.error.set('Please accept the Terms of Service.'); return; }
+    this.loading.set(true);
+    this.error.set('');
+    try {
+      await this.oasis.register(this.firstName, this.lastName, this.username, this.email, this.password);
+      this.success.set(true);
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Registration failed. Please try again.');
+    } finally {
+      this.loading.set(false);
+    }
+  }
+}

package/src/components/star-field/star-field.component.ts

@@ -0,0 +1,44 @@
+import { Component, ElementRef, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-star-field',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<canvas #canvas class="star-canvas"></canvas>`,
+  styles: [`
+    :host { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
+    .star-canvas { width: 100%; height: 100%; display: block; }
+  `]
+})
+export class StarFieldComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
+  private animId = 0;
+  private stars: { x: number; y: number; r: number; o: number; s: number }[] = [];
+
+  ngAfterViewInit(): void {
+    const canvas = this.canvasRef.nativeElement;
+    const ctx = canvas.getContext('2d')!;
+    const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };
+    resize();
+    window.addEventListener('resize', resize);
+    for (let i = 0; i < 160; i++) {
+      this.stars.push({ x: Math.random(), y: Math.random(), r: Math.random() * 1.2 + 0.2, o: Math.random(), s: (Math.random() - 0.5) * 0.002 });
+    }
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (const s of this.stars) {
+        s.o += s.s;
+        if (s.o < 0.1 || s.o > 1) s.s = -s.s;
+        ctx.beginPath();
+        ctx.arc(s.x * canvas.width, s.y * canvas.height, s.r, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(200,220,255,${s.o.toFixed(2)})`;
+        ctx.fill();
+      }
+      this.animId = requestAnimationFrame(draw);
+    };
+    draw();
+  }
+
+  ngOnDestroy(): void { cancelAnimationFrame(this.animId); }
+}

package/src/components/verify-email/verify-email.component.ts

@@ -0,0 +1,48 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OASISClient } from '@oasisomniverse/web4-api';
+
+@Component({
+  selector: 'oasis-verify-email',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="oasis-auth-form">
+      <div class="oasis-auth-header">
+        <div style="font-size:48px;margin-bottom:12px">📧</div>
+        <h2 class="oasis-auth-title">Verify Your Email</h2>
+        <p class="oasis-auth-sub">We sent a verification link to your email address. Check your inbox and click the link to activate your account.</p>
+      </div>
+      @if (error()) { <div class="oasis-auth-error">{{ error() }}</div> }
+      @if (sent()) { <div class="oasis-auth-success">✅ Verification email resent!</div> }
+      <button class="oasis-btn oasis-btn--ghost" type="button" [disabled]="loading()" (click)="resend()">
+        {{ loading() ? 'Sending…' : 'Resend Verification Email' }}
+      </button>
+    </div>
+  `,
+  styles: [`
+    .oasis-auth-form{display:flex;flex-direction:column;gap:20px;text-align:center}
+    .oasis-auth-header{display:flex;flex-direction:column;align-items:center}
+    .oasis-auth-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 8px}
+    .oasis-auth-sub{font-size:13px;color:#7a9bbf;margin:0;line-height:1.6;max-width:360px}
+    .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:10px 14px;font-size:13px}
+    .oasis-btn{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--ghost{background:transparent;border:1px solid rgba(0,200,255,.3);color:#00c8ff}
+    .oasis-btn:disabled{opacity:.5;cursor:not-allowed}
+  `]
+})
+export class VerifyEmailComponent {
+  loading = signal(false); error = signal(''); sent = signal(false);
+
+  async resend() {
+    this.loading.set(true); this.error.set(''); this.sent.set(false);
+    try {
+      const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' });
+      await (oasis.auth as any).resendVerificationEmail();
+      this.sent.set(true);
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Failed to resend. Please try again.');
+    } finally { this.loading.set(false); }
+  }
+}

package/src/components/wallet/wallet.component.ts

@@ -0,0 +1,83 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Transaction { id: string; type: 'in' | 'out'; amount: number; currency: string; description: string; date: string }
+
+@Component({
+  selector: 'oasis-wallet',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="wlt-shell">
+      <div class="wlt-header"><h2 class="wlt-title">💰 Wallet</h2><p class="wlt-sub">Your OASIS multi-chain wallet.</p></div>
+      <div class="wlt-balances">
+        @for (b of balances; track b.currency) {
+          <div class="wlt-balance-card">
+            <div class="wlt-currency-icon">{{ b.icon }}</div>
+            <div class="wlt-currency-info">
+              <div class="wlt-currency-name">{{ b.currency }}</div>
+              <div class="wlt-currency-net">{{ b.network }}</div>
+            </div>
+            <div class="wlt-amount">{{ b.amount }} <span class="wlt-symbol">{{ b.symbol }}</span></div>
+          </div>
+        }
+      </div>
+      <div class="wlt-actions">
+        <button class="wlt-action-btn">📤 Send</button>
+        <button class="wlt-action-btn">📥 Receive</button>
+        <button class="wlt-action-btn">🔄 Swap</button>
+      </div>
+      <div class="wlt-tx-header">Recent Transactions</div>
+      <div class="wlt-tx-list">
+        @for (t of transactions; track t.id) {
+          <div class="wlt-tx">
+            <div class="wlt-tx-icon wlt-tx-icon--{{ t.type }}">{{ t.type === 'in' ? '↓' : '↑' }}</div>
+            <div class="wlt-tx-info"><div class="wlt-tx-desc">{{ t.description }}</div><div class="wlt-tx-date">{{ t.date }}</div></div>
+            <div class="wlt-tx-amount wlt-tx-amount--{{ t.type }}">{{ t.type === 'in' ? '+' : '-' }}{{ t.amount }} {{ t.currency }}</div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .wlt-shell{display:flex;flex-direction:column;gap:18px}
+    .wlt-header{text-align:center}
+    .wlt-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .wlt-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .wlt-balances{display:flex;flex-direction:column;gap:10px}
+    .wlt-balance-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px 16px}
+    .wlt-currency-icon{font-size:24px}
+    .wlt-currency-info{flex:1}
+    .wlt-currency-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .wlt-currency-net{font-size:11px;color:#7a9bbf;margin-top:2px}
+    .wlt-amount{font-family:'Share Tech Mono',monospace;font-size:16px;color:#00c8ff;font-weight:600}
+    .wlt-symbol{font-size:12px;color:#7a9bbf}
+    .wlt-actions{display:flex;gap:10px}
+    .wlt-action-btn{flex:1;background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:10px;cursor:pointer;transition:all .2s}
+    .wlt-action-btn:hover{background:rgba(0,200,255,.15)}
+    .wlt-tx-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}
+    .wlt-tx-list{display:flex;flex-direction:column;gap:8px}
+    .wlt-tx{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.08);border-radius:8px}
+    .wlt-tx-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
+    .wlt-tx-icon--in{background:rgba(72,220,130,.15);color:#48dc82}
+    .wlt-tx-icon--out{background:rgba(255,107,107,.15);color:#ff6b6b}
+    .wlt-tx-info{flex:1}
+    .wlt-tx-desc{font-size:13px;color:#e0f0ff}
+    .wlt-tx-date{font-size:11px;color:#4a6a88;margin-top:2px}
+    .wlt-tx-amount{font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:600;white-space:nowrap}
+    .wlt-tx-amount--in{color:#48dc82}
+    .wlt-tx-amount--out{color:#ff6b6b}
+  `]
+})
+export class WalletComponent {
+  balances = [
+    { icon: '⟠', currency: 'Ethereum', network: 'Mainnet', amount: '0.4821', symbol: 'ETH' },
+    { icon: '◎', currency: 'Solana', network: 'Mainnet', amount: '12.305', symbol: 'SOL' },
+    { icon: '⬡', currency: 'Polygon', network: 'Mainnet', amount: '245.00', symbol: 'MATIC' },
+  ];
+  transactions: Transaction[] = [
+    { id: '1', type: 'in', amount: 0.05, currency: 'ETH', description: 'NFT Sale — Cosmic Warrior', date: '2 hours ago' },
+    { id: '2', type: 'out', amount: 12, currency: 'SOL', description: 'Quest Reward Conversion', date: '1 day ago' },
+    { id: '3', type: 'in', amount: 100, currency: 'MATIC', description: 'Karma Reward Payout', date: '3 days ago' },
+  ];
+}

package/src/index.ts

@@ -0,0 +1,145 @@
+// @oasisomniverse/angular — OASIS Omniverse Angular 17 standalone components
+
+// ── Core / layout ────────────────────────────────────────────────────────────
+export { AvatarConnectComponent }    from './components/avatar-connect/avatar-connect.component';
+export { AvatarProfileComponent }    from './components/avatar-profile/avatar-profile.component';
+export { ComingSoonComponent }       from './components/coming-soon/coming-soon.component';
+export { ConfirmationComponent }     from './components/confirmation/confirmation.component';
+export { ContactComponent }          from './components/contact/contact.component';
+export { ForgotPasswordComponent }   from './components/forgot-password/forgot-password.component';
+export { HyperDriveComponent }       from './components/hyperdrive/hyperdrive.component';
+export { KarmaPanelComponent }       from './components/karma-panel/karma-panel.component';
+export { KarmaToastComponent }       from './components/karma-toast/karma-toast.component';
+export { LoginComponent }            from './components/login/login.component';
+export { MenuMessageComponent }      from './components/menu-message/menu-message.component';
+export { MessagingComponent }        from './components/messaging/messaging.component';
+export { ModalComponent }            from './components/modal/modal.component';
+export { NavbarComponent }           from './components/navbar/navbar.component';
+export { OASISCardComponent }        from './components/oasis-card/oasis-card.component';
+export { ONETComponent }             from './components/onet/onet.component';
+export { ONODEComponent }            from './components/onode/onode.component';
+export { ProviderDropdownComponent } from './components/provider-dropdown/provider-dropdown.component';
+export { ProvidersComponent }        from './components/providers/providers.component';
+export { ResetPasswordComponent }    from './components/reset-password/reset-password.component';
+export { SearchAvatarsComponent }    from './components/search-avatars/search-avatars.component';
+export { SettingsComponent }         from './components/settings/settings.component';
+export { SignupComponent }           from './components/signup/signup.component';
+export { StarFieldComponent }        from './components/star-field/star-field.component';
+export { VerifyEmailComponent }      from './components/verify-email/verify-email.component';
+export { WalletComponent }           from './components/wallet/wallet.component';
+
+// ── Avatar popup sub-components ──────────────────────────────────────────────
+export { AvatarWalletComponent }     from './components/avatar/avatar-wallet.component';
+export { EditAvatarComponent }       from './components/avatar/edit-avatar.component';
+export { SearchAvatarComponent }     from './components/avatar/search-avatar.component';
+export { ViewAvatarComponent }       from './components/avatar/view-avatar.component';
+
+// ── Data Screen popup sub-components ─────────────────────────────────────────
+export { AddDataComponent }                from './components/data-screen/add-data.component';
+export { CrossChainManagementComponent }   from './components/data-screen/cross-chain-management.component';
+export { LoadDataComponent }               from './components/data-screen/load-data.component';
+export { ManageDataComponent }             from './components/data-screen/manage-data.component';
+export { OffChainManagementComponent }     from './components/data-screen/off-chain-management.component';
+export { SearchDataComponent }             from './components/data-screen/search-data.component';
+
+// ── Eggs popup sub-components ─────────────────────────────────────────────────
+export { EggsComponent }             from './components/eggs/eggs.component';
+export { ManageEggsComponent }       from './components/eggs/manage-eggs.component';
+export { SearchEggsComponent }       from './components/eggs/search-eggs.component';
+export { ViewEggsComponent }         from './components/eggs/view-eggs.component';
+
+// ── Game popup sub-components ─────────────────────────────────────────────────
+export { GameComponent }             from './components/game/game.component';
+export { SearchProfilesComponent }   from './components/game/search-profiles.component';
+export { ViewAchievementsComponent } from './components/game/view-achievements.component';
+export { ViewLeaguesComponent }      from './components/game/view-leagues.component';
+export { ViewTournamentsComponent }  from './components/game/view-tournaments.component';
+
+// ── Karma popup sub-components ────────────────────────────────────────────────
+export { SearchKarmaComponent }      from './components/karma/search-karma.component';
+export { ViewAvatarKarmaComponent }  from './components/karma/view-avatar-karma.component';
+export { ViewKarmaComponent }        from './components/karma/view-karma.component';
+export { VoteKarmaComponent }        from './components/karma/vote-karma.component';
+
+// ── Map popup sub-components ──────────────────────────────────────────────────
+export { MapComponent }              from './components/map/map.component';
+export { Add2dObjectMapComponent }   from './components/map/add-2d-object-map.component';
+export { Add3dObjectMapComponent }   from './components/map/add-3d-object-map.component';
+export { AddQuestToMapComponent }    from './components/map/add-quest-to-map.component';
+export { DownloadOurWorldComponent } from './components/map/download-our-world.component';
+export { ManageMapComponent }        from './components/map/manage-map.component';
+export { PlotRouteOnMapComponent }   from './components/map/plot-route-on-map.component';
+export { SearchMapComponent }        from './components/map/search-map.component';
+export { ViewGlobal3dMapComponent }  from './components/map/view-global-3d-map.component';
+export { ViewHalonsOnMapComponent }  from './components/map/view-halons-on-map.component';
+export { ViewOappOnMapComponent }    from './components/map/view-oapp-on-map.component';
+export { ViewQuestOnMapComponent }   from './components/map/view-quest-on-map.component';
+
+// ── Messages popup sub-components ────────────────────────────────────────────
+export { MessageComponent }          from './components/messages/message.component';
+
+// ── Mission popup sub-components ──────────────────────────────────────────────
+export { MissionComponent }          from './components/mission/mission.component';
+export { ManageMissionComponent }    from './components/mission/manage-mission.component';
+export { SearchMissionComponent }    from './components/mission/search-mission.component';
+export { ViewMissionComponent }      from './components/mission/view-mission.component';
+
+// ── NFT popup sub-components ──────────────────────────────────────────────────
+export { NFTComponent }                        from './components/nft/nft.component';
+export { ManageOasisNftComponent }             from './components/nft/manage-oasis-nft.component';
+export { PurchaseOasisNftComponent }           from './components/nft/purchase-oasis-nft.component';
+export { PurchaseOasisVirtualLandNftComponent } from './components/nft/purchase-oasis-virtual-land-nft.component';
+export { SearchOasisNftComponent }             from './components/nft/search-oasis-nft.component';
+export { ViewOasisNftComponent }               from './components/nft/view-oasis-nft.component';
+export { NftContactPopupComponent }            from './components/nft/contact-popup.component';
+export { SolanaComponent }                     from './components/nft/solana.component';
+
+// ── OAPP popup sub-components ─────────────────────────────────────────────────
+export { OAppComponent }             from './components/oapp/oapp.component';
+export { CreateOAPPComponent }       from './components/oapp/create-oapp.component';
+export { DeployOAPPComponent }       from './components/oapp/deploy-oapp.component';
+export { OAPPDownloadOurWorldComponent } from './components/oapp/download-our-world.component';
+export { EditOAPPComponent }         from './components/oapp/edit-oapp.component';
+export { InstallOAPPComponent }      from './components/oapp/install-oapp.component';
+export { LaunchOAPPComponent }       from './components/oapp/launch-oapp.component';
+export { ManageOAPPComponent }       from './components/oapp/manage-oapp.component';
+export { SearchOAPPComponent }       from './components/oapp/search-oapp.component';
+
+// ── Provider popup sub-components ─────────────────────────────────────────────
+export { ActivityPubComponent }          from './components/provider/activity-pub.component';
+export { CompareProviderSpeedsComponent } from './components/provider/compare-provider-speeds.component';
+export { EosioComponent }                from './components/provider/eosio.component';
+export { EthereumComponent }             from './components/provider/ethereum.component';
+export { HolochainComponent }            from './components/provider/holochain.component';
+export { IpfsComponent }                 from './components/provider/ipfs.component';
+export { ManageAutoFailOverComponent }   from './components/provider/manage-auto-fail-over.component';
+export { ManageAutoReplicatonComponent } from './components/provider/manage-auto-replicaton.component';
+export { ManageLoadBalancingComponent }  from './components/provider/manage-load-balancing.component';
+export { ManageProvidersComponent }      from './components/provider/manage-providers.component';
+export { MongoDbComponent }              from './components/provider/mongo-db.component';
+export { Neo4jComponent }                from './components/provider/neo4j.component';
+export { SearchProvidersComponent }      from './components/provider/search-providers.component';
+export { SeedsProviderComponent }        from './components/provider/seeds-provider.component';
+export { SolidComponent }                from './components/provider/solid.component';
+export { SqlLiteComponent }              from './components/provider/sql-lite.component';
+export { ThreeFoldComponent }            from './components/provider/three-fold.component';
+export { ViewProvidersComponent }        from './components/provider/view-providers.component';
+export { ViewProviderStatsComponent }    from './components/provider/view-provider-stats.component';
+
+// ── Quest popup sub-components ────────────────────────────────────────────────
+export { QuestComponent }            from './components/quest/quest.component';
+export { ManageQuestComponent }      from './components/quest/manage-quest.component';
+export { SearchQuestComponent }      from './components/quest/search-quest.component';
+export { ViewQuestComponent }        from './components/quest/view-quest.component';
+
+// ── Seeds popup sub-components ────────────────────────────────────────────────
+export { SeedsComponent }            from './components/seeds/seeds.component';
+export { AcceptInviteComponent }     from './components/seeds/accept-invite.component';
+export { DonateSeedsComponent }      from './components/seeds/donate-seeds.component';
+export { ManageSeedsComponent }      from './components/seeds/manage-seeds.component';
+export { PayWithSeedsComponent }     from './components/seeds/pay-with-seeds.component';
+export { RewardSeedsComponent }      from './components/seeds/reward-seeds.component';
+export { SearchSeedsComponent }      from './components/seeds/search-seeds.component';
+export { SendInviteComponent }       from './components/seeds/send-invite.component';
+export { ViewOrganizationsComponent } from './components/seeds/view-organizations.component';
+export { ViewSeedsComponent }        from './components/seeds/view-seeds.component';