@oasisomniverse/angular 1.0.0

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

@@ -0,0 +1,52 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-oasis-nft',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="von-shell">
+      <div class="von-header"><span>🎨</span><h2 class="von-title">View OASIS NFTs</h2></div>
+      <div class="von-grid">
+        @for (nft of nfts(); track nft.id) {
+          <div class="von-card">
+            <div class="von-preview">{{ nft.emoji }}</div>
+            <div class="von-body">
+              <div class="von-name">{{ nft.name }}</div>
+              <div class="von-collection">{{ nft.collection }}</div>
+              <div class="von-price">{{ nft.price }}</div>
+            </div>
+          </div>
+        }
+      </div>
+      <div class="von-footer"><button class="von-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .von-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .von-header{display:flex;align-items:center;gap:10px}
+    .von-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .von-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
+    .von-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;overflow:hidden}
+    .von-preview{font-size:48px;display:flex;align-items:center;justify-content:center;height:80px;background:rgba(0,200,255,.05)}
+    .von-body{padding:10px 12px}
+    .von-name{font-family:'Orbitron',sans-serif;font-size:11px;color:#fff}
+    .von-collection{font-size:10px;color:#7a9bbf;margin-top:2px}
+    .von-price{font-size:11px;color:#ffb43c;font-weight:700;margin-top:4px}
+    .von-footer{display:flex;justify-content:flex-end}
+    .von-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 ViewOasisNftComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  nfts = signal([
+    { id:1, emoji:'🏛️', name:'OASIS Hub Alpha', collection:'Genesis', price:'0.05 ETH' },
+    { id:2, emoji:'🌌', name:'Cosmic Artifact', collection:'Cosmic', price:'0.12 ETH' },
+    { id:3, emoji:'🐉', name:'Dragon Companion', collection:'Beasts', price:'0.25 ETH' },
+    { id:4, emoji:'💎', name:'Crystal Gem', collection:'Gems', price:'0.08 ETH' },
+    { id:5, emoji:'🚀', name:'Starship', collection:'Vehicles', price:'0.15 ETH' },
+    { id:6, emoji:'🌺', name:'Rare Bloom', collection:'Flora', price:'0.03 ETH' },
+  ]);
+}

package/src/components/oapp/create-oapp.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-create-oapp',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>➕</span><h2 class="mf-title">Create OAPP</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">OAPP Name</label><input class="mf-inp" placeholder="OAPP Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Description</label><input class="mf-inp" placeholder="Description..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Version</label><input class="mf-inp" placeholder="Version..." /></div>
+        <div class="mf-field"><label class="mf-lbl">License</label><input class="mf-inp" placeholder="License..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Category</label><input class="mf-inp" placeholder="Category..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Tags</label><input class="mf-inp" placeholder="Tags..." /></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 CreateOAPPComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/oapp/deploy-oapp.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-deploy-oapp',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🚀</span><h2 class="mf-title">Deploy OAPP</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">OAPP</label><input class="mf-inp" placeholder="OAPP..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Target Environment</label><input class="mf-inp" placeholder="Target Environment..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Provider</label><input class="mf-inp" placeholder="Provider..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Deploy Key</label><input class="mf-inp" placeholder="Deploy Key..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Notes</label><input class="mf-inp" 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 DeployOAPPComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/oapp/download-our-world.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-oapp-download-our-world',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">⬇️</div>
+      <h2 class="popup-title">Download Our World</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 OAPPDownloadOurWorldComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/oapp/edit-oapp.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-edit-oapp',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>✏️</span><h2 class="mf-title">Edit OAPP</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">OAPP Name</label><input class="mf-inp" placeholder="OAPP Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Description</label><input class="mf-inp" placeholder="Description..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Version</label><input class="mf-inp" placeholder="Version..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Category</label><input class="mf-inp" placeholder="Category..." /></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 EditOAPPComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/oapp/install-oapp.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-install-oapp',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>📦</span><h2 class="sf-title">Install OAPP</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search OAPPs to install..." (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 InstallOAPPComponent {
+  @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/oapp/launch-oapp.component.ts

@@ -0,0 +1,58 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-launch-oapp',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="lo-shell">
+      <div class="lo-header"><span>🚀</span><h2 class="lo-title">Launch OAPP</h2></div>
+      <div class="lo-list">
+        @for (app of oapps(); track app.id) {
+          <div class="lo-card" (click)="selected.set(app.id)" [class.lo-card--sel]="selected()===app.id">
+            <div class="lo-icon">{{ app.icon }}</div>
+            <div class="lo-info"><div class="lo-name">{{ app.name }}</div><div class="lo-version">v{{ app.version }}</div></div>
+            <div class="lo-status lo-status--{{ app.status.toLowerCase() }}">{{ app.status }}</div>
+          </div>
+        }
+      </div>
+      <div class="lo-footer">
+        <button class="lo-launch" [disabled]="!selected()" (click)="launch()">Launch</button>
+        <button class="lo-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .lo-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .lo-header{display:flex;align-items:center;gap:10px}
+    .lo-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .lo-list{display:flex;flex-direction:column;gap:8px}
+    .lo-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:12px 16px;cursor:pointer;transition:border-color .2s}
+    .lo-card:hover{border-color:rgba(0,200,255,.3)}
+    .lo-card--sel{border-color:#00c8ff;background:rgba(0,200,255,.08)}
+    .lo-icon{font-size:28px}
+    .lo-info{flex:1}
+    .lo-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .lo-version{font-size:11px;color:#7a9bbf;margin-top:2px}
+    .lo-status{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .lo-status--installed{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .lo-status--available{color:#5ba8ff;border-color:rgba(91,168,255,.3)}
+    .lo-footer{display:flex;gap:10px;justify-content:flex-end}
+    .lo-launch{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}
+    .lo-launch:disabled{opacity:.4;cursor:not-allowed}
+    .lo-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 LaunchOAPPComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  selected = signal<number|null>(null);
+  oapps = signal([
+    { id:1, icon:'🎮', name:'OASIS Game Hub', version:'1.4.2', status:'Installed' },
+    { id:2, icon:'🗺️', name:'World Explorer', version:'2.1.0', status:'Installed' },
+    { id:3, icon:'💹', name:'SEEDS Market', version:'1.0.5', status:'Available' },
+    { id:4, icon:'📡', name:'ONET Messenger', version:'3.0.1', status:'Installed' },
+  ]);
+  launch() { this.close.emit(); }
+}

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

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-oapp',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>⚙️</span><h2 class="mf-title">Manage OAPP</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">OAPP Name</label><input class="mf-inp" placeholder="OAPP Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Version</label><input class="mf-inp" placeholder="Version..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Status</label><input class="mf-inp" placeholder="Status..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Provider</label><input class="mf-inp" placeholder="Provider..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Auto-Update</label><input class="mf-inp" placeholder="Auto-Update..." /></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 ManageOAPPComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/oapp/oapp.component.ts

@@ -0,0 +1,70 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+interface OApp { id: string; name: string; description: string; category: string; icon: string; karma: number; launched: boolean }
+
+@Component({
+  selector: 'oasis-oapp',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="oapp-shell">
+      <div class="oapp-header"><h2 class="oapp-title">📱 OApps</h2><p class="oapp-sub">Decentralised apps built on the OASIS network.</p></div>
+      <div class="oapp-search-wrap"><input class="oasis-input" type="text" [(ngModel)]="search" placeholder="Search OApps…" /></div>
+      <div class="oapp-grid">
+        @for (a of filtered(); track a.id) {
+          <div class="oapp-card">
+            <div class="oapp-icon">{{ a.icon }}</div>
+            <div class="oapp-info">
+              <div class="oapp-name">{{ a.name }}</div>
+              <div class="oapp-cat">{{ a.category }}</div>
+              <div class="oapp-desc">{{ a.description }}</div>
+            </div>
+            <div class="oapp-footer">
+              <div class="oapp-karma">+{{ a.karma }} karma</div>
+              <button class="oapp-btn" [class.oapp-btn--launched]="a.launched" (click)="toggle(a)">{{ a.launched ? 'Quit' : 'Launch' }}</button>
+            </div>
+          </div>
+        }
+        @if (filtered().length === 0) { <div class="oapp-empty">No OApps found.</div> }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .oapp-shell{display:flex;flex-direction:column;gap:18px}
+    .oapp-header{text-align:center}
+    .oapp-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .oapp-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .oapp-search-wrap{}
+    .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;font-family:inherit}
+    .oasis-input:focus{border-color:rgba(0,200,255,.5)}
+    .oapp-grid{display:flex;flex-direction:column;gap:12px}
+    .oapp-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:flex-start;transition:border-color .2s}
+    .oapp-card:hover{border-color:rgba(0,200,255,.3)}
+    .oapp-icon{font-size:32px;flex-shrink:0}
+    .oapp-info{flex:1}
+    .oapp-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:3px}
+    .oapp-cat{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
+    .oapp-desc{font-size:12px;color:#7a9bbf;line-height:1.5}
+    .oapp-footer{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
+    .oapp-karma{font-size:11px;color:#48dc82;font-weight:600;white-space:nowrap}
+    .oapp-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:7px 16px;cursor:pointer;transition:opacity .2s;white-space:nowrap}
+    .oapp-btn--launched{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.4);color:#ff6b6b}
+    .oapp-empty{text-align:center;color:#4a6a88;font-size:14px;padding:32px}
+  `]
+})
+export class OAppComponent {
+  search = '';
+  oapps = signal<OApp[]>([
+    { id: '1', name: 'OLAND', description: 'Virtual land management and terraforming in the OASIS.', category: 'Metaverse', icon: '🌍', karma: 200, launched: false },
+    { id: '2', name: 'OMARKET', description: 'Decentralised marketplace for NFTs and digital goods.', category: 'Commerce', icon: '🛒', karma: 150, launched: false },
+    { id: '3', name: 'OCHAT', description: 'Encrypted peer-to-peer messaging on the ONET.', category: 'Social', icon: '💬', karma: 80, launched: false },
+    { id: '4', name: 'OQUESTS', description: 'Daily quests and challenges for karma rewards.', category: 'Gaming', icon: '⚔️', karma: 300, launched: false },
+  ]);
+  filtered() {
+    const q = this.search.toLowerCase();
+    return this.oapps().filter(a => a.name.toLowerCase().includes(q) || a.description.toLowerCase().includes(q));
+  }
+  toggle(a: OApp) { this.oapps.update(list => list.map(x => x.id === a.id ? { ...x, launched: !x.launched } : x)); }
+}

package/src/components/oapp/search-oapp.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-oapp',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🔍</span><h2 class="sf-title">Search OAPPs</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search by name, category or developer..." (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 SearchOAPPComponent {
+  @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/oasis-card/oasis-card.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="card" [style.border-color]="borderColor">
+      <div class="card-icon" *ngIf="icon">{{ icon }}</div>
+      <div class="card-kicker" *ngIf="kicker" [style.color]="accentColor">{{ kicker }}</div>
+      <h3 class="card-title" *ngIf="title">{{ title }}</h3>
+      <ng-content />
+    </div>
+  `,
+  styles: [`
+    .card { background: var(--bg-card, #0e1f44); border: 1px solid rgba(232,121,249,.15); border-radius: 16px; padding: 32px 26px; height: 100%; box-sizing: border-box; transition: transform .3s, border-color .3s; }
+    .card:hover { transform: translateY(-4px); }
+    .card-icon { font-size: 36px; margin-bottom: 16px; }
+    .card-kicker { font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; margin-bottom: 10px; }
+    .card-title { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .06em; margin: 0 0 12px; }
+  `]
+})
+export class OasisCardComponent {
+  @Input() icon = '';
+  @Input() kicker = '';
+  @Input() title = '';
+  @Input() borderColor = 'rgba(232,121,249,.15)';
+  @Input() accentColor = '#e879f9';
+}

package/src/components/onet/onet.component.ts

@@ -0,0 +1,77 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-onet',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="onet-shell">
+      <div class="onet-header"><h2 class="onet-title">🌐 ONET</h2><p class="onet-sub">The OASIS decentralised internet layer.</p></div>
+      <div class="onet-status-card" [class.onet-status--active]="connected()">
+        <div class="onet-status-dot" [class.onet-status-dot--active]="connected()"></div>
+        <div class="onet-status-info">
+          <div class="onet-status-label">ONET Connection</div>
+          <div class="onet-status-val">{{ connected() ? 'Connected' : 'Disconnected' }}</div>
+        </div>
+        <button class="onet-btn" (click)="connected.set(!connected())">{{ connected() ? 'Disconnect' : 'Connect' }}</button>
+      </div>
+      @if (connected()) {
+        <div class="onet-stats">
+          @for (s of stats; track s.label) {
+            <div class="onet-stat"><div class="onet-stat-val">{{ s.value }}</div><div class="onet-stat-label">{{ s.label }}</div></div>
+          }
+        </div>
+        <div class="onet-peers-header">Active Peers</div>
+        <div class="onet-peers">
+          @for (p of peers; track p.id) {
+            <div class="onet-peer">
+              <div class="onet-peer-icon">👤</div>
+              <div class="onet-peer-info"><div class="onet-peer-name">{{ p.name }}</div><div class="onet-peer-location">{{ p.location }}</div></div>
+              <div class="onet-peer-ping">{{ p.ping }}ms</div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .onet-shell{display:flex;flex-direction:column;gap:18px}
+    .onet-header{text-align:center}
+    .onet-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .onet-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .onet-status-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px}
+    .onet-status--active{border-color:rgba(72,220,130,.3)}
+    .onet-status-dot{width:12px;height:12px;border-radius:50%;background:#4a6a88;flex-shrink:0;transition:all .3s}
+    .onet-status-dot--active{background:#48dc82;box-shadow:0 0 10px #48dc82}
+    .onet-status-info{flex:1}
+    .onet-status-label{font-size:12px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}
+    .onet-status-val{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;margin-top:3px}
+    .onet-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 18px;cursor:pointer}
+    .onet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
+    .onet-stat{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}
+    .onet-stat-val{font-family:'Share Tech Mono',monospace;font-size:18px;color:#00c8ff;font-weight:600}
+    .onet-stat-label{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
+    .onet-peers-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}
+    .onet-peers{display:flex;flex-direction:column;gap:8px}
+    .onet-peer{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.07);border-radius:8px}
+    .onet-peer-icon{font-size:20px}
+    .onet-peer-info{flex:1}
+    .onet-peer-name{font-size:13px;color:#e0f0ff}
+    .onet-peer-location{font-size:11px;color:#4a6a88;margin-top:2px}
+    .onet-peer-ping{font-family:'Share Tech Mono',monospace;font-size:12px;color:#48dc82}
+  `]
+})
+export class OnetComponent {
+  connected = signal(false);
+  stats = [
+    { label: 'Peers', value: '2,847' },
+    { label: 'Speed', value: '1.2 Gb/s' },
+    { label: 'Encrypted', value: '100%' },
+  ];
+  peers = [
+    { id: '1', name: 'AvatarX_7291', location: 'New York, US', ping: 14 },
+    { id: '2', name: 'StarKeeper_99', location: 'London, UK', ping: 32 },
+    { id: '3', name: 'NeonRider_404', location: 'Tokyo, JP', ping: 67 },
+  ];
+}