@oasisomniverse/angular 1.0.0

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

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-quest',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vq-shell">
+      <div class="vq-header"><span>⚔️</span><h2 class="vq-title">View Quests</h2></div>
+      <div class="vq-list">
+        @for (q of quests(); track q.id) {
+          <div class="vq-card">
+            <div class="vq-difficulty vq-difficulty--{{ q.difficulty.toLowerCase() }}">{{ q.difficulty }}</div>
+            <div class="vq-name">{{ q.name }}</div>
+            <div class="vq-desc">{{ q.description }}</div>
+            <div class="vq-meta"><span>Reward: {{ q.reward }}</span><span>Level {{ q.level }}+</span></div>
+          </div>
+        }
+      </div>
+      <div class="vq-footer"><button class="vq-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vq-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vq-header{display:flex;align-items:center;gap:10px}
+    .vq-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vq-list{display:flex;flex-direction:column;gap:10px}
+    .vq-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}
+    .vq-difficulty{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}
+    .vq-difficulty--easy{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .vq-difficulty--medium{color:#ffb43c;border-color:rgba(255,180,60,.3)}
+    .vq-difficulty--hard{color:#ff5050;border-color:rgba(255,80,80,.3)}
+    .vq-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .vq-desc{font-size:12px;color:#a8bfd8;line-height:1.5}
+    .vq-meta{display:flex;gap:16px;font-size:11px;color:#7a9bbf}
+    .vq-footer{display:flex;justify-content:flex-end}
+    .vq-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 ViewQuestComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  quests = signal([
+    { id:1, name:'The Lost Artifact', description:'Recover the ancient artifact from the Crystal Caves.', difficulty:'Hard', reward:'500 SEEDS + 200 XP', level:10 },
+    { id:2, name:'Merchant Escort', description:'Safely escort the merchant caravan through the danger zone.', difficulty:'Medium', reward:'150 SEEDS + 75 XP', level:5 },
+    { id:3, name:'Herb Gathering', description:'Collect 10 moonblossoms from the Enchanted Forest.', difficulty:'Easy', reward:'25 SEEDS + 20 XP', level:1 },
+  ]);
+}

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

@@ -0,0 +1,68 @@
+import { Component, signal, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OASISClient } from '@oasisomniverse/web4-api';
+
+@Component({
+  selector: 'oasis-reset-password',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="oasis-auth-form">
+      <div class="oasis-auth-header">
+        <h2 class="oasis-auth-title">Reset Password</h2>
+        <p class="oasis-auth-sub">Enter your new password below.</p>
+      </div>
+      @if (error()) { <div class="oasis-auth-error">{{ error() }}</div> }
+      @if (!done()) {
+        <div class="oasis-field">
+          <label class="oasis-label" for="rp-pwd">New Password</label>
+          <input class="oasis-input" id="rp-pwd" type="password" [(ngModel)]="password" placeholder="min 6 characters" autocomplete="new-password" />
+        </div>
+        <div class="oasis-field">
+          <label class="oasis-label" for="rp-cpwd">Confirm Password</label>
+          <input class="oasis-input" id="rp-cpwd" type="password" [(ngModel)]="confirmPassword" placeholder="••••••••" autocomplete="new-password" />
+        </div>
+        <button class="oasis-btn" type="button" [disabled]="loading()" (click)="submit()">
+          {{ loading() ? 'Resetting…' : 'Reset Password' }}
+        </button>
+      } @else {
+        <div class="oasis-auth-success">✅ Password reset! <a class="oasis-link" (click)="switchTo.emit('login')" href="javascript:void(0)">Beam In</a></div>
+      }
+    </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}
+    .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-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-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 ResetPasswordComponent {
+  @Output() switchTo = new EventEmitter<'login'>();
+  password = ''; confirmPassword = '';
+  loading = signal(false); error = signal(''); done = signal(false);
+
+  async submit() {
+    if (!this.password || !this.confirmPassword) { 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; }
+    this.loading.set(true); this.error.set('');
+    try {
+      const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' });
+      await (oasis.auth as any).resetPassword({ password: this.password });
+      this.done.set(true);
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Reset failed. Please try again.');
+    } finally { this.loading.set(false); }
+  }
+}

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

@@ -0,0 +1,80 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OASISClient } from '@oasisomniverse/web4-api';
+
+interface AvatarResult { id: string; username: string; firstName: string; lastName: string; karma: number }
+
+@Component({
+  selector: 'oasis-search-avatars',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sa-shell">
+      <div class="sa-header">
+        <h2 class="sa-title">🔍 Search Avatars</h2>
+        <p class="sa-sub">Find other OASIS avatars by username or name.</p>
+      </div>
+      <div class="sa-search-row">
+        <input class="oasis-input" type="text" [(ngModel)]="query" placeholder="Search by username…" (keydown.enter)="search()" />
+        <button class="oasis-btn" [disabled]="loading() || !query.trim()" (click)="search()">{{ loading() ? '…' : 'Search' }}</button>
+      </div>
+      @if (error()) { <div class="oasis-auth-error">{{ error() }}</div> }
+      @if (results().length > 0) {
+        <div class="sa-results">
+          @for (a of results(); track a.id) {
+            <div class="sa-card">
+              <div class="sa-avatar-icon">👤</div>
+              <div class="sa-info">
+                <div class="sa-username">{{ a.username }}</div>
+                <div class="sa-name">{{ a.firstName }} {{ a.lastName }}</div>
+              </div>
+              <div class="sa-karma">{{ a.karma }} karma</div>
+            </div>
+          }
+        </div>
+      } @else if (searched() && !loading()) {
+        <div class="sa-empty">No avatars found for "{{ query }}".</div>
+      }
+    </div>
+  `,
+  styles: [`
+    .sa-shell{display:flex;flex-direction:column;gap:18px}
+    .sa-header{text-align:center}
+    .sa-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .sa-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .sa-search-row{display:flex;gap:10px}
+    .oasis-input{flex:1;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;transition:border-color .2s;font-family:inherit}
+    .oasis-input:focus{border-color:rgba(0,200,255,.5)}
+    .oasis-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 20px;cursor:pointer;white-space:nowrap;transition:opacity .2s}
+    .oasis-btn:disabled{opacity:.4;cursor:not-allowed}
+    .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}
+    .sa-results{display:flex;flex-direction:column;gap:10px}
+    .sa-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px}
+    .sa-avatar-icon{font-size:28px}
+    .sa-info{flex:1}
+    .sa-username{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .sa-name{font-size:12px;color:#7a9bbf;margin-top:2px}
+    .sa-karma{font-size:12px;color:#48dc82;font-weight:600;white-space:nowrap}
+    .sa-empty{text-align:center;color:#4a6a88;font-size:14px;padding:24px}
+  `]
+})
+export class SearchAvatarsComponent {
+  query = '';
+  loading = signal(false); error = signal(''); searched = signal(false);
+  results = signal<AvatarResult[]>([]);
+  private readonly API = 'https://api.web4.oasisomniverse.one';
+
+  async search() {
+    if (!this.query.trim()) return;
+    this.loading.set(true); this.error.set(''); this.searched.set(false); this.results.set([]);
+    try {
+      const oasis = new OASISClient({ baseUrl: this.API });
+      const res: any = await (oasis.avatar as any).searchAvatars({ searchQuery: this.query });
+      this.results.set(Array.isArray(res?.result) ? res.result : []);
+      this.searched.set(true);
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Search failed.');
+    } finally { this.loading.set(false); }
+  }
+}

package/src/components/seeds/accept-invite.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-accept-invite',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="ai-shell">
+      <div class="ai-header"><span>🤝</span><h2 class="ai-title">Accept Invite</h2></div>
+      <div class="ai-field"><label class="ai-lbl">Invite Code</label><input class="ai-inp" [(ngModel)]="code" placeholder="Enter your invite code..." /></div>
+      @if (message()) { <div class="ai-message">{{ message() }}</div> }
+      <div class="ai-footer">
+        <button class="ai-accept" (click)="accept()">Accept</button>
+        <button class="ai-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .ai-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .ai-header{display:flex;align-items:center;gap:10px}
+    .ai-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .ai-field{display:flex;flex-direction:column;gap:6px}
+    .ai-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .ai-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}
+    .ai-inp:focus{border-color:rgba(0,200,255,.6)}
+    .ai-message{background:rgba(0,200,100,.08);border:1px solid rgba(0,200,100,.2);border-radius:8px;color:#00c864;font-size:13px;padding:12px 16px}
+    .ai-footer{display:flex;gap:10px;justify-content:flex-end}
+    .ai-accept{background:linear-gradient(135deg,#00c864,#007840);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .ai-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 AcceptInviteComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  code = '';
+  message = signal('');
+  accept() {
+    if (!this.code.trim()) return;
+    this.message.set('Invite accepted! Welcome to the OASIS community.');
+    setTimeout(() => this.close.emit(), 1500);
+  }
+}

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

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-donate-seeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🌱</span><h2 class="mf-title">Donate Seeds</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Recipient Avatar</label><input class="mf-inp" placeholder="Recipient Avatar..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Amount</label><input class="mf-inp" placeholder="Amount..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Organization</label><input class="mf-inp" placeholder="Organization..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Note</label><input class="mf-inp" placeholder="Note..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Reference</label><input class="mf-inp" placeholder="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 DonateSeedsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

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

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-seeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>⚙️</span><h2 class="mf-title">Manage Seeds</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Seeds Account No</label><input class="mf-inp" placeholder="Seeds Account No..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Default Provider</label><input class="mf-inp" placeholder="Default Provider..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Auto-Plant Setting</label><input class="mf-inp" placeholder="Auto-Plant Setting..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Min Balance Alert</label><input class="mf-inp" placeholder="Min Balance Alert..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Notifications</label><input class="mf-inp" placeholder="Notifications..." /></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 ManageSeedsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/seeds/pay-with-seeds.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-pay-with-seeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>💰</span><h2 class="mf-title">Pay with Seeds</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Recipient</label><input class="mf-inp" placeholder="Recipient..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Amount</label><input class="mf-inp" placeholder="Amount..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Memo</label><input class="mf-inp" placeholder="Memo..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Reference</label><input class="mf-inp" placeholder="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 PayWithSeedsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

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

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-reward-seeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🏆</span><h2 class="mf-title">Reward Seeds</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Avatar to Reward</label><input class="mf-inp" placeholder="Avatar to Reward..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Amount</label><input class="mf-inp" placeholder="Amount..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Reason</label><input class="mf-inp" placeholder="Reason..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Quest/Mission Reference</label><input class="mf-inp" placeholder="Quest/Mission 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 RewardSeedsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/seeds/search-seeds.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-seeds',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🔍</span><h2 class="sf-title">Search Seeds</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search by avatar or transaction ID..." (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 SearchSeedsComponent {
+  @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/seeds/seeds.component.ts

@@ -0,0 +1,75 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Seed { id: string; name: string; type: string; rarity: string; karma: number; planted: boolean }
+
+@Component({
+  selector: 'oasis-seeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="seeds-shell">
+      <div class="seeds-header">
+        <h2 class="seeds-title">🌱 Seeds</h2>
+        <p class="seeds-sub">Plant seeds to grow your OASIS avatar and earn karma.</p>
+      </div>
+      <div class="seeds-grid">
+        @for (s of seeds(); track s.id) {
+          <div class="seed-card" [class.seed-card--planted]="s.planted">
+            <div class="seed-rarity seed-rarity--{{ s.rarity.toLowerCase() }}">{{ s.rarity }}</div>
+            <div class="seed-icon">{{ seedIcon(s.type) }}</div>
+            <div class="seed-name">{{ s.name }}</div>
+            <div class="seed-type">{{ s.type }}</div>
+            <div class="seed-karma">+{{ s.karma }} Karma</div>
+            @if (!s.planted) {
+              <button class="seed-btn" (click)="plant(s)">Plant Seed</button>
+            } @else {
+              <div class="seed-planted-label">🌿 Growing…</div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .seeds-shell{display:flex;flex-direction:column;gap:20px}
+    .seeds-header{text-align:center}
+    .seeds-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .seeds-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .seeds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
+    .seed-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}
+    .seed-card:hover{border-color:rgba(0,200,255,.35)}
+    .seed-card--planted{border-color:rgba(72,220,130,.3);background:rgba(72,220,130,.04)}
+    .seed-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}
+    .seed-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}
+    .seed-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}
+    .seed-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}
+    .seed-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}
+    .seed-icon{font-size:36px}
+    .seed-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;text-align:center}
+    .seed-type{font-size:11px;color:#7a9bbf}
+    .seed-karma{font-size:12px;color:#48dc82;font-weight:600}
+    .seed-btn{width:100%;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:8px;cursor:pointer;transition:opacity .2s}
+    .seed-btn:hover{opacity:.85}
+    .seed-planted-label{font-size:12px;color:#48dc82;font-weight:600}
+  `]
+})
+export class SeedsComponent {
+  seeds = signal<Seed[]>([
+    { id: '1', name: 'Wisdom Seed', type: 'Spiritual', rarity: 'Rare', karma: 50, planted: false },
+    { id: '2', name: 'Healing Seed', type: 'Health', rarity: 'Common', karma: 20, planted: false },
+    { id: '3', name: 'Unity Seed', type: 'Community', rarity: 'Epic', karma: 150, planted: false },
+    { id: '4', name: 'Truth Seed', type: 'Knowledge', rarity: 'Legendary', karma: 500, planted: false },
+    { id: '5', name: 'Love Seed', type: 'Spiritual', rarity: 'Common', karma: 30, planted: false },
+    { id: '6', name: 'Peace Seed', type: 'Community', rarity: 'Rare', karma: 75, planted: false },
+  ]);
+
+  seedIcon(type: string): string {
+    const m: Record<string, string> = { Spiritual: '✨', Health: '💚', Community: '🤝', Knowledge: '📖' };
+    return m[type] ?? '🌱';
+  }
+
+  plant(s: Seed) {
+    this.seeds.update(list => list.map(x => x.id === s.id ? { ...x, planted: true } : x));
+  }
+}

package/src/components/seeds/send-invite.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-send-invite',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>✉️</span><h2 class="mf-title">Send Invite</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Recipient Name</label><input class="mf-inp" placeholder="Recipient 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">Personalised Message</label><input class="mf-inp" placeholder="Personalised Message..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Seeds Bonus Amount</label><input class="mf-inp" placeholder="Seeds Bonus Amount..." /></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 SendInviteComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

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

@@ -0,0 +1,55 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-organizations',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vo-shell">
+      <div class="vo-header"><span>🏢</span><h2 class="vo-title">View Organizations</h2></div>
+      <div class="vo-list">
+        @for (org of organizations(); track org.id) {
+          <div class="vo-card">
+            <div class="vo-icon">{{ org.icon }}</div>
+            <div class="vo-info">
+              <div class="vo-name">{{ org.name }}</div>
+              <div class="vo-members">{{ org.members }} members</div>
+              <div class="vo-desc">{{ org.description }}</div>
+            </div>
+            <button class="vo-join" (click)="join(org.id)">{{ org.joined ? 'Joined' : 'Join' }}</button>
+          </div>
+        }
+      </div>
+      <div class="vo-footer"><button class="vo-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vo-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vo-header{display:flex;align-items:center;gap:10px}
+    .vo-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vo-list{display:flex;flex-direction:column;gap:10px}
+    .vo-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}
+    .vo-icon{font-size:32px;flex-shrink:0}
+    .vo-info{flex:1}
+    .vo-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .vo-members{font-size:11px;color:#7a9bbf;margin-top:2px}
+    .vo-desc{font-size:12px;color:#a8bfd8;margin-top:4px}
+    .vo-join{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:8px 14px;cursor:pointer;flex-shrink:0;white-space:nowrap}
+    .vo-footer{display:flex;justify-content:flex-end}
+    .vo-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 ViewOrganizationsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  organizations = signal([
+    { id:1, icon:'🌿', name:'SEEDS Collective', members:2840, description:'Regenerative economics community.', joined:true },
+    { id:2, icon:'🌐', name:'OASIS Builders', members:1520, description:'Open source development collective.', joined:false },
+    { id:3, icon:'💡', name:'Innovation DAO', members:890, description:'Funding breakthrough ideas in the OASIS.', joined:false },
+    { id:4, icon:'🎨', name:'Creative Guild', members:340, description:'NFT artists and digital creators.', joined:true },
+  ]);
+  join(id: number) {
+    this.organizations.update(list => list.map(o => o.id === id ? { ...o, joined: !o.joined } : o));
+  }
+}