@oasisomniverse/angular 1.0.0

package/src/components/provider/search-providers.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-providers',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🔍</span><h2 class="sf-title">Search Providers</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search by provider name or type..." (keyup.enter)="search()" /><button class="sf-btn" (click)="search()">Search</button></div>
+      @for (r of results(); track r) { <div class="sf-result">{{ r }}</div> }
+      <div class="sf-footer"><button class="sf-cancel" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .sf-shell{display:flex;flex-direction:column;gap:14px;padding:20px}
+    .sf-header{display:flex;align-items:center;gap:10px}
+    .sf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .sf-row{display:flex;gap:10px}
+    .sf-input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .sf-input:focus{border-color:rgba(0,200,255,.6)}
+    .sf-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 20px;cursor:pointer;white-space:nowrap}
+    .sf-result{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:8px;color:#c8dff0;font-size:13px;padding:10px 14px}
+    .sf-footer{display:flex;justify-content:flex-end}
+    .sf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:8px 20px;cursor:pointer}
+  `]
+})
+export class SearchProvidersComponent {
+  @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/provider/seeds-provider.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-seeds-provider',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🌱</span><h2 class="mf-title">SEEDS Provider</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Account Number</label><input class="mf-inp" placeholder="Account Number..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Network</label><input class="mf-inp" placeholder="Network..." /></div>
+        <div class="mf-field"><label class="mf-lbl">API Endpoint</label><input class="mf-inp" placeholder="API Endpoint..." /></div>
+        <div class="mf-field"><label class="mf-lbl">API Key</label><input class="mf-inp" placeholder="API Key..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Region</label><input class="mf-inp" placeholder="Region..." /></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 SeedsProviderComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/provider/solid.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-solid',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🔷</div><h2 class="pi-title">Solid</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">Solid</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">solidproject.org</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Decentralised data storage enabling user ownership of personal data.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{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:9px 18px;cursor:pointer}
+    .pi-btn-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:9px 18px;cursor:pointer}
+  `]
+})
+export class SolidComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/sql-lite.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-sql-lite',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🗄️</div><h2 class="pi-title">SQLite</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">SQLite</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">sqlite.org</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Lightweight embedded relational database engine.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{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:9px 18px;cursor:pointer}
+    .pi-btn-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:9px 18px;cursor:pointer}
+  `]
+})
+export class SqlLiteComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/three-fold.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-three-fold',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🌱</div><h2 class="pi-title">ThreeFold</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">ThreeFold</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">threefold.io</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Decentralised cloud infrastructure powered by renewable energy.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{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:9px 18px;cursor:pointer}
+    .pi-btn-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:9px 18px;cursor:pointer}
+  `]
+})
+export class ThreeFoldComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/view-provider-stats.component.ts

@@ -0,0 +1,61 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-provider-stats',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vps-shell">
+      <div class="vps-header"><span>📊</span><h2 class="vps-title">Provider Stats</h2></div>
+      <div class="vps-grid">
+        @for (stat of stats(); track stat.label) {
+          <div class="vps-card">
+            <div class="vps-card-icon">{{ stat.icon }}</div>
+            <div class="vps-card-val">{{ stat.value }}</div>
+            <div class="vps-card-lbl">{{ stat.label }}</div>
+          </div>
+        }
+      </div>
+      <div class="vps-list">
+        @for (p of providerStats(); track p.name) {
+          <div class="vps-row"><span class="vps-pname">{{ p.name }}</span><span class="vps-puptime">{{ p.uptime }}% uptime</span><span class="vps-pspeed">{{ p.speed }}ms</span></div>
+        }
+      </div>
+      <div class="vps-footer"><button class="vps-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vps-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vps-header{display:flex;align-items:center;gap:10px}
+    .vps-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
+    .vps-card{background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:6px}
+    .vps-card-icon{font-size:24px}
+    .vps-card-val{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;color:#00c8ff}
+    .vps-card-lbl{font-size:10px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}
+    .vps-list{display:flex;flex-direction:column;gap:6px}
+    .vps-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:8px 12px;font-size:12px}
+    .vps-pname{flex:1;color:#c8dff0}
+    .vps-puptime{color:#00c864;font-weight:600}
+    .vps-pspeed{color:#7a9bbf;width:50px;text-align:right}
+    .vps-footer{display:flex;justify-content:flex-end}
+    .vps-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 ViewProviderStatsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  stats = signal([
+    { icon:'🌐', label:'Active Providers', value:'4' },
+    { icon:'⚡', label:'Avg Speed', value:'55ms' },
+    { icon:'📈', label:'Uptime', value:'99.2%' },
+    { icon:'🔄', label:'Sync Count', value:'1,248' },
+  ]);
+  providerStats = signal([
+    { name:'Holochain', uptime:99.9, speed:12 },
+    { name:'Ethereum', uptime:99.5, speed:180 },
+    { name:'MongoDB', uptime:99.8, speed:5 },
+    { name:'SQLite', uptime:100, speed:1 },
+  ]);
+}

package/src/components/provider/view-providers.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-providers',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vp-shell">
+      <div class="vp-header"><span>🌐</span><h2 class="vp-title">View Providers</h2></div>
+      <div class="vp-table-wrap">
+        <table class="vp-table">
+          <thead><tr><th>Provider</th><th>Installed</th><th>Running</th><th>VP Time</th></tr></thead>
+          <tbody>
+            @for (p of providers(); track p.name) {
+              <tr>
+                <td>{{ p.name }}</td>
+                <td><span class="vp-dot">{{ p.installed ? '✅' : '❌' }}</span></td>
+                <td><span class="vp-dot">{{ p.running ? '🟢' : '⚪' }}</span></td>
+                <td>{{ p.vpTime }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <div class="vp-footer"><button class="vp-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vp-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vp-header{display:flex;align-items:center;gap:10px}
+    .vp-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vp-table-wrap{overflow-x:auto;border:1px solid rgba(0,200,255,.15);border-radius:10px}
+    .vp-table{width:100%;border-collapse:collapse;font-size:13px}
+    .vp-table th{background:rgba(0,200,255,.08);color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;padding:10px 12px;text-align:left;border-bottom:1px solid rgba(0,200,255,.15)}
+    .vp-table td{color:#c8dff0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
+    .vp-table tr:last-child td{border-bottom:none}
+    .vp-footer{display:flex;justify-content:flex-end}
+    .vp-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 ViewProvidersComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  providers = signal([
+    { name: 'Holochain', installed: true, running: true, vpTime: '12ms' },
+    { name: 'Ethereum', installed: true, running: true, vpTime: '180ms' },
+    { name: 'IPFS', installed: true, running: false, vpTime: 'N/A' },
+    { name: 'MongoDB', installed: true, running: true, vpTime: '5ms' },
+    { name: 'Neo4j', installed: false, running: false, vpTime: 'N/A' },
+    { name: 'SQLite', installed: true, running: true, vpTime: '1ms' },
+    { name: 'ThreeFold', installed: false, running: false, vpTime: 'N/A' },
+  ]);
+}

package/src/components/provider-dropdown/provider-dropdown.component.ts

@@ -0,0 +1,64 @@
+import { Component, signal, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Provider { id: string; name: string; icon: string; color: string }
+
+@Component({
+  selector: 'oasis-provider-dropdown',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pd-shell">
+      <div class="pd-trigger" [class.pd-trigger--open]="open()" (click)="open.set(!open())">
+        <div class="pd-icon" [style.color]="selected().color">{{ selected().icon }}</div>
+        <div class="pd-label">
+          <div class="pd-name">{{ selected().name }}</div>
+          <div class="pd-sub">Active Provider</div>
+        </div>
+        <div class="pd-arrow" [class.pd-arrow--open]="open()">▼</div>
+      </div>
+      @if (open()) {
+        <div class="pd-menu">
+          @for (p of providers; track p.id) {
+            <div class="pd-option" [class.pd-option--selected]="p.id === selected().id" (click)="select(p)">
+              <div class="pd-opt-icon" [style.color]="p.color">{{ p.icon }}</div>
+              <div class="pd-opt-name">{{ p.name }}</div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    :host{display:block;position:relative}
+    .pd-shell{position:relative}
+    .pd-trigger{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .2s;color:#fff}
+    .pd-trigger:hover,.pd-trigger--open{border-color:rgba(0,200,255,.5)}
+    .pd-icon{font-size:20px;width:28px;text-align:center}
+    .pd-label{flex:1}
+    .pd-name{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#fff}
+    .pd-sub{font-size:11px;color:#7a9bbf;margin-top:2px}
+    .pd-arrow{font-size:10px;color:#7a9bbf;transition:transform .2s}
+    .pd-arrow--open{transform:rotate(180deg)}
+    .pd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0d1b2e;border:1px solid rgba(0,200,255,.2);border-radius:10px;overflow:hidden;z-index:100;box-shadow:0 8px 32px rgba(0,0,0,.5)}
+    .pd-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;color:#e0f0ff}
+    .pd-option:hover{background:rgba(0,200,255,.1)}
+    .pd-option--selected{background:rgba(0,200,255,.12);border-left:3px solid #00c8ff}
+    .pd-opt-icon{font-size:18px;width:24px;text-align:center}
+    .pd-opt-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700}
+  `]
+})
+export class ProviderDropdownComponent {
+  @Output() providerChange = new EventEmitter<Provider>();
+  open = signal(false);
+  providers: Provider[] = [
+    { id: 'ethereum', name: 'Ethereum', icon: '⟠', color: '#627eea' },
+    { id: 'solana', name: 'Solana', icon: '◎', color: '#9945ff' },
+    { id: 'polygon', name: 'Polygon', icon: '⬡', color: '#8247e5' },
+    { id: 'arbitrum', name: 'Arbitrum', icon: '🔵', color: '#2d9cdb' },
+    { id: 'eosio', name: 'EOSIO', icon: '🔮', color: '#443f54' },
+    { id: 'holochain', name: 'Holochain', icon: '⬡', color: '#00e5be' },
+  ];
+  selected = signal<Provider>(this.providers[0]);
+  select(p: Provider) { this.selected.set(p); this.open.set(false); this.providerChange.emit(p); }
+}

package/src/components/providers/providers.component.ts

@@ -0,0 +1,60 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Provider { id: string; name: string; icon: string; color: string; type: string; connected: boolean; description: string }
+
+@Component({
+  selector: 'oasis-providers',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="prov-shell">
+      <div class="prov-header"><h2 class="prov-title">🔗 Providers</h2><p class="prov-sub">Connect blockchain providers to your OASIS avatar.</p></div>
+      <div class="prov-list">
+        @for (p of providers(); track p.id) {
+          <div class="prov-card" [class.prov-card--connected]="p.connected">
+            <div class="prov-icon" [style.color]="p.color">{{ p.icon }}</div>
+            <div class="prov-info">
+              <div class="prov-name">{{ p.name }}</div>
+              <div class="prov-type">{{ p.type }}</div>
+              <div class="prov-desc">{{ p.description }}</div>
+            </div>
+            <div class="prov-actions">
+              <div class="prov-status-dot" [class.prov-status-dot--on]="p.connected"></div>
+              <button class="prov-btn" [class.prov-btn--disconnect]="p.connected" (click)="toggle(p)">{{ p.connected ? 'Disconnect' : 'Connect' }}</button>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .prov-shell{display:flex;flex-direction:column;gap:18px}
+    .prov-header{text-align:center}
+    .prov-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .prov-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .prov-list{display:flex;flex-direction:column;gap:10px}
+    .prov-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:14px 16px;transition:border-color .2s}
+    .prov-card--connected{border-color:rgba(72,220,130,.3);background:rgba(72,220,130,.03)}
+    .prov-icon{font-size:26px;flex-shrink:0}
+    .prov-info{flex:1}
+    .prov-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:2px}
+    .prov-type{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
+    .prov-desc{font-size:12px;color:#7a9bbf}
+    .prov-actions{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
+    .prov-status-dot{width:8px;height:8px;border-radius:50%;background:#4a6a88}
+    .prov-status-dot--on{background:#48dc82;box-shadow:0 0 6px #48dc82}
+    .prov-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;padding:7px 14px;cursor:pointer;white-space:nowrap}
+    .prov-btn--disconnect{background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}
+  `]
+})
+export class ProvidersComponent {
+  providers = signal<Provider[]>([
+    { id: '1', name: 'Ethereum', icon: '⟠', color: '#627eea', type: 'Blockchain', description: 'Connect your Ethereum wallet (MetaMask, WalletConnect).', connected: false },
+    { id: '2', name: 'Solana', icon: '◎', color: '#9945ff', type: 'Blockchain', description: 'Connect your Solana wallet (Phantom, Solflare).', connected: false },
+    { id: '3', name: 'EOSIO', icon: '🔮', color: '#443f54', type: 'Blockchain', description: 'Connect via EOSIO for high-speed transactions.', connected: false },
+    { id: '4', name: 'Holochain', icon: '⬡', color: '#00e5be', type: 'P2P Network', description: 'Peer-to-peer data storage on Holochain.', connected: false },
+    { id: '5', name: 'The Graph', icon: '📊', color: '#6f4cff', type: 'Indexer', description: 'Query blockchain data with The Graph protocol.', connected: false },
+  ]);
+  toggle(p: Provider) { this.providers.update(l => l.map(x => x.id === p.id ? { ...x, connected: !x.connected } : x)); }
+}

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

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-quest',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>⚔️</span><h2 class="mf-title">Manage Quest</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Quest Name</label><input class="mf-inp" placeholder="Quest Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Description</label><input class="mf-inp" placeholder="Description..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Reward</label><input class="mf-inp" placeholder="Reward..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Difficulty</label><input class="mf-inp" placeholder="Difficulty..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Required Level</label><input class="mf-inp" placeholder="Required Level..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Location</label><input class="mf-inp" placeholder="Location..." /></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 ManageQuestComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

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

@@ -0,0 +1,65 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Quest { id: string; title: string; description: string; reward: number; difficulty: 'Easy' | 'Medium' | 'Hard' | 'Legendary'; accepted: boolean; completed: boolean }
+
+@Component({
+  selector: 'oasis-quest',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="qst-shell">
+      <div class="qst-header"><h2 class="qst-title">⚔️ Quests</h2><p class="qst-sub">Embark on quests to gain karma and rare rewards.</p></div>
+      <div class="qst-list">
+        @for (q of quests(); track q.id) {
+          <div class="qst-card" [class.qst-card--active]="q.accepted && !q.completed" [class.qst-card--done]="q.completed">
+            <div class="qst-diff qst-diff--{{ q.difficulty.toLowerCase() }}">{{ q.difficulty }}</div>
+            <div class="qst-body">
+              <div class="qst-title-text">{{ q.title }}</div>
+              <div class="qst-desc">{{ q.description }}</div>
+              <div class="qst-reward">+{{ q.reward }} karma</div>
+            </div>
+            <div class="qst-actions">
+              @if (q.completed) { <div class="qst-done">✅ Done</div> }
+              @else if (!q.accepted) { <button class="qst-btn" (click)="accept(q)">Accept Quest</button> }
+              @else { <button class="qst-btn qst-btn--finish" (click)="complete(q)">Finish</button> }
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .qst-shell{display:flex;flex-direction:column;gap:18px}
+    .qst-header{text-align:center}
+    .qst-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .qst-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .qst-list{display:flex;flex-direction:column;gap:12px}
+    .qst-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;transition:border-color .2s}
+    .qst-card--active{border-color:rgba(0,200,255,.4)}
+    .qst-card--done{opacity:.6;border-color:rgba(72,220,130,.2)}
+    .qst-diff{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 10px;border:1px solid currentColor;white-space:nowrap;flex-shrink:0}
+    .qst-diff--easy{color:#48dc82;border-color:rgba(72,220,130,.3)}
+    .qst-diff--medium{color:#ffb43c;border-color:rgba(255,180,60,.3)}
+    .qst-diff--hard{color:#ff6b6b;border-color:rgba(255,107,107,.3)}
+    .qst-diff--legendary{color:#b87fff;border-color:rgba(184,127,255,.3)}
+    .qst-body{flex:1}
+    .qst-title-text{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:4px}
+    .qst-desc{font-size:12px;color:#7a9bbf;line-height:1.5;margin-bottom:6px}
+    .qst-reward{font-size:12px;color:#48dc82;font-weight:600}
+    .qst-actions{flex-shrink:0}
+    .qst-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:8px 16px;cursor:pointer;white-space:nowrap}
+    .qst-btn--finish{background:linear-gradient(135deg,#48dc82,#00aa55)}
+    .qst-done{font-size:13px;color:#48dc82;font-weight:600}
+  `]
+})
+export class QuestComponent {
+  quests = signal<Quest[]>([
+    { id: '1', title: 'Avatar Awakening', description: 'Complete your avatar profile and connect your first provider.', reward: 200, difficulty: 'Easy', accepted: true, completed: true },
+    { id: '2', title: 'Karma Seeker', description: 'Earn 1000 karma through good deeds and OASIS contributions.', reward: 500, difficulty: 'Medium', accepted: true, completed: false },
+    { id: '3', title: 'The NFT Collector', description: 'Acquire 5 unique NFTs across different categories.', reward: 1000, difficulty: 'Hard', accepted: false, completed: false },
+    { id: '4', title: 'Omniverse Explorer', description: 'Visit every major hub location on the OASIS map.', reward: 2500, difficulty: 'Legendary', accepted: false, completed: false },
+  ]);
+  accept(q: Quest) { this.quests.update(l => l.map(x => x.id === q.id ? { ...x, accepted: true } : x)); }
+  complete(q: Quest) { this.quests.update(l => l.map(x => x.id === q.id ? { ...x, completed: true } : x)); }
+}

package/src/components/quest/search-quest.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-quest',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>🔍</span><h2 class="sf-title">Search Quests</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search quests by name, difficulty, or reward..." (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 SearchQuestComponent {
+  @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 + '"']); }
+}