@oasisomniverse/angular 1.0.0

package/package.json

@@ -0,0 +1,37 @@
+{
+    "name":  "@oasisomniverse/angular",
+    "version":  "1.0.0",
+    "description":  "OASIS Omniverse Angular 17 standalone UI components",
+    "keywords":  [
+                     "oasis",
+                     "omniverse",
+                     "angular",
+                     "components",
+                     "standalone"
+                 ],
+    "author":  "NextGenSoftware",
+    "license":  "MIT",
+    "repository":  {
+                       "type":  "git",
+                       "url":  "https://github.com/NextGenSoftwareUK/OASIS-Angular-UI-Component-Library.git"
+                   },
+    "main":  "src/index.ts",
+    "exports":  {
+                    ".":  "./src/index.ts",
+                    "./components/*":  "./src/components/*.component.ts"
+                },
+    "files":  [
+                  "src"
+              ],
+    "peerDependencies":  {
+                             "@angular/core":  "\u003e=17.0.0",
+                             "@angular/common":  "\u003e=17.0.0",
+                             "@oasisomniverse/web4-api":  "\u003e=2.0.0"
+                         },
+    "scripts":  {
+
+                },
+    "publishConfig":  {
+                          "access":  "public"
+                      }
+}

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

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-avatar-wallet',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="aw-shell">
+      <div class="aw-header"><span class="aw-icon">💰</span><h2 class="aw-title">Avatar Wallet</h2></div>
+      <div class="aw-table-wrap">
+        <table class="aw-table">
+          <thead><tr><th>Date</th><th>Note</th><th>From Avatar</th><th>Token</th><th>Amount</th><th>Balance</th><th>Provider</th><th>Type</th></tr></thead>
+          <tbody>
+            @for (row of transactions(); track row.id) {
+              <tr><td>{{ row.date }}</td><td>{{ row.note }}</td><td>{{ row.fromAvatar }}</td><td>{{ row.token }}</td><td>{{ row.amount }}</td><td>{{ row.balance }}</td><td>{{ row.provider }}</td><td><span class="aw-badge aw-badge--{{ row.type.toLowerCase() }}">{{ row.type }}</span></td></tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <div class="aw-footer"><button class="aw-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .aw-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .aw-header{display:flex;align-items:center;gap:10px}
+    .aw-icon{font-size:26px}
+    .aw-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .aw-table-wrap{overflow-x:auto;border:1px solid rgba(0,200,255,.15);border-radius:10px}
+    .aw-table{width:100%;border-collapse:collapse;font-size:13px}
+    .aw-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);white-space:nowrap}
+    .aw-table td{color:#c8dff0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
+    .aw-table tr:last-child td{border-bottom:none}
+    .aw-table tr:hover td{background:rgba(0,200,255,.04)}
+    .aw-badge{border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700}
+    .aw-badge--credit{background:rgba(0,200,100,.15);color:#00c864;border:1px solid rgba(0,200,100,.3)}
+    .aw-badge--debit{background:rgba(255,80,80,.12);color:#ff5050;border:1px solid rgba(255,80,80,.3)}
+    .aw-footer{display:flex;justify-content:flex-end}
+    .aw-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 AvatarWalletComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  transactions = signal([
+    { id: 1, date: '2026-07-01', note: 'Quest reward', fromAvatar: 'StarWalker', token: 'SEEDS', amount: '50', balance: '350', provider: 'Holochain', type: 'Credit' },
+    { id: 2, date: '2026-07-03', note: 'NFT purchase', fromAvatar: 'Self', token: 'ETH', amount: '0.05', balance: '1.12', provider: 'Ethereum', type: 'Debit' },
+  ]);
+}

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

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

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

@@ -0,0 +1,45 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-search-avatar',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sa-shell">
+      <div class="sa-header"><span>🔍</span><h2 class="sa-title">Search Avatars</h2></div>
+      <div class="sa-row">
+        <input class="sa-input" [(ngModel)]="query" placeholder="Username or avatar name..." (keyup.enter)="search()" />
+        <button class="sa-btn" (click)="search()">Search</button>
+      </div>
+      @for (r of results(); track r.name) {
+        <div class="sa-card"><div class="sa-name">{{ r.name }}</div><div class="sa-meta">Level {{ r.level }} · {{ r.karma }} karma</div></div>
+      }
+      <button class="sa-cancel" (click)="close.emit()">Close</button>
+    </div>
+  `,
+  styles: [`
+    .sa-shell{display:flex;flex-direction:column;gap:14px;padding:20px}
+    .sa-header{display:flex;align-items:center;gap:10px}
+    .sa-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .sa-row{display:flex;gap:10px}
+    .sa-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}
+    .sa-input:focus{border-color:rgba(0,200,255,.6)}
+    .sa-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}
+    .sa-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:8px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
+    .sa-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .sa-meta{font-size:12px;color:#7a9bbf}
+    .sa-cancel{align-self:flex-end;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 SearchAvatarComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  query = '';
+  results = signal<{name:string;level:number;karma:number}[]>([]);
+  search() {
+    if (!this.query.trim()) return;
+    this.results.set([{ name: this.query, level: 7, karma: 420 }]);
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-avatar',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="va-shell">
+      <div class="va-header"><span>👤</span><h2 class="va-title">View Avatars</h2></div>
+      <div class="va-table-wrap">
+        <table class="va-table">
+          <thead><tr><th>Avatar</th><th>Level</th><th>Karma</th><th>Sex</th><th>Created</th><th>Online</th></tr></thead>
+          <tbody>
+            @for (a of avatars(); track a.name) {
+              <tr>
+                <td>{{ a.name }}</td><td>{{ a.level }}</td><td>{{ a.karma }}</td><td>{{ a.sex }}</td><td>{{ a.created }}</td>
+                <td><span class="va-dot" [class.va-dot--on]="a.online">{{ a.online ? '🟢' : '⚪' }}</span></td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <div class="va-footer"><button class="va-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .va-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .va-header{display:flex;align-items:center;gap:10px}
+    .va-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .va-table-wrap{overflow-x:auto;border:1px solid rgba(0,200,255,.15);border-radius:10px}
+    .va-table{width:100%;border-collapse:collapse;font-size:13px}
+    .va-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)}
+    .va-table td{color:#c8dff0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
+    .va-table tr:last-child td{border-bottom:none}
+    .va-table tr:hover td{background:rgba(0,200,255,.04)}
+    .va-footer{display:flex;justify-content:flex-end}
+    .va-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 ViewAvatarComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  avatars = signal([
+    { name: 'StarWalker', level: 12, karma: 840, sex: 'Male', created: '2024-01-15', online: true },
+    { name: 'NebulaDancer', level: 7, karma: 420, sex: 'Female', created: '2024-03-22', online: false },
+    { name: 'CosmicSage', level: 20, karma: 1500, sex: 'Male', created: '2023-11-01', online: true },
+  ]);
+}

package/src/components/avatar-connect/avatar-connect.component.ts

@@ -0,0 +1,78 @@
+import { Component, signal, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OasisService } from '../../services/oasis.service';
+
+@Component({
+  selector: 'oasis-avatar-connect',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    @if (session()) {
+      <div class="avatar-badge">
+        <span class="avatar-icon">⬡</span>
+        <span class="avatar-name">{{ session()!.username }}</span>
+        <span class="karma-pill">{{ session()!.karma | number }} ✦</span>
+        <button class="logout-btn" (click)="oasis.logout()">✕</button>
+      </div>
+    } @else {
+      <button class="connect-btn" (click)="open = true">⬡ CONNECT AVATAR</button>
+    }
+
+    @if (open) {
+      <div class="modal-backdrop" (click)="open = false">
+        <div class="modal-box" (click)="$event.stopPropagation()">
+          <button class="modal-close" (click)="open = false">✕</button>
+          <div class="modal-icon">⬡</div>
+          <h2 class="modal-title">Connect Your Avatar</h2>
+          <p class="modal-sub">Sign in to your OASIS avatar to earn karma and participate in Global Healing Network.</p>
+          <input [(ngModel)]="username" placeholder="Avatar username" class="oasis-input" />
+          <input [(ngModel)]="password" type="password" placeholder="Password" class="oasis-input" />
+          @if (error) { <p class="error-msg">{{ error }}</p> }
+          <button class="btn-primary" [disabled]="loading" (click)="login()">
+            {{ loading ? 'Connecting…' : 'Connect Avatar' }}
+          </button>
+        </div>
+      </div>
+    }
+  `,
+  styles: [`
+    .connect-btn { background: none; border: 1px solid rgba(232,121,249,.4); border-radius: 999px; padding: 8px 18px; color: #e879f9; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .1em; cursor: pointer; transition: background .2s; }
+    .connect-btn:hover { background: rgba(232,121,249,.08); }
+    .avatar-badge { display: flex; align-items: center; gap: 8px; }
+    .avatar-icon { color: #e879f9; font-size: 16px; }
+    .avatar-name { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #fff; letter-spacing: .06em; }
+    .karma-pill { background: rgba(232,121,249,.12); border: 1px solid rgba(232,121,249,.3); border-radius: 999px; padding: 2px 10px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #e879f9; }
+    .logout-btn { background: none; border: none; color: #a8bfd8; cursor: pointer; font-size: 14px; margin-left: 4px; }
+    .modal-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(3,7,20,.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; }
+    .modal-box { background: #0a1535; border: 1px solid rgba(232,121,249,.25); border-radius: 20px; padding: 40px 36px; max-width: 440px; width: 100%; position: relative; }
+    .modal-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: #a8bfd8; font-size: 20px; cursor: pointer; }
+    .modal-icon { font-size: 40px; text-align: center; color: #e879f9; margin-bottom: 16px; }
+    .modal-title { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: #fff; text-align: center; margin: 0 0 8px; }
+    .modal-sub { font-size: 14px; color: #a8bfd8; text-align: center; margin: 0 0 24px; line-height: 1.6; }
+    .oasis-input { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(232,121,249,.2); border-radius: 8px; padding: 11px 14px; color: #fff; font-size: 14px; outline: none; box-sizing: border-box; margin-bottom: 12px; display: block; }
+    .btn-primary { width: 100%; padding: 14px; background: linear-gradient(135deg, #e879f9, #a855f7); border: none; border-radius: 10px; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; cursor: pointer; margin-top: 4px; }
+    .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
+    .error-msg { color: #f87171; font-size: 13px; text-align: center; margin-bottom: 8px; }
+  `]
+})
+export class AvatarConnectComponent {
+  oasis = inject(OasisService);
+  session = this.oasis.session;
+  open = false;
+  loading = false;
+  error = '';
+  username = '';
+  password = '';
+
+  async login(): Promise<void> {
+    if (!this.username || !this.password) { this.error = 'Please fill in both fields.'; return; }
+    this.loading = true; this.error = '';
+    try {
+      await this.oasis.login(this.username, this.password);
+      this.open = false; this.username = ''; this.password = '';
+    } catch {
+      this.error = 'Login failed. Please check your credentials.';
+    } finally { this.loading = false; }
+  }
+}

package/src/components/avatar-profile/avatar-profile.component.ts

@@ -0,0 +1,146 @@
+import { Component, OnInit, signal, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OasisService } from '../../services/oasis.service';
+
+interface AvatarFields {
+  title: string; firstName: string; lastName: string;
+  username: string; email: string; address: string;
+}
+
+@Component({
+  selector: 'oasis-avatar-profile',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="avp-shell">
+      @if (!oasis.session()) {
+        <div class="avp-empty">Please <strong>Beam In</strong> to view your avatar.</div>
+      } @else {
+        <div class="avp-layout">
+          <aside class="avp-summary">
+            <div class="avp-avatar-img">
+              <span class="avp-avatar-icon">👤</span>
+            </div>
+            <div class="avp-name">{{ oasis.session()?.username }}</div>
+            <div class="avp-stats">
+              <div class="avp-stat">
+                <span class="avp-stat-icon">⚡</span>
+                <div>
+                  <div class="avp-stat-value">{{ oasis.session()?.karma ?? '—' }}</div>
+                  <div class="avp-stat-label">Karma</div>
+                </div>
+              </div>
+            </div>
+          </aside>
+
+          <div class="avp-fields">
+            <div class="avp-section-label">PROFILE</div>
+            <div class="avp-field-row">
+              <label class="avp-label" for="avp-title">Title</label>
+              <input class="avp-input" id="avp-title" type="text" [(ngModel)]="fields.title" placeholder="Dr, Mr, Ms…" (input)="dirty = true" />
+            </div>
+            <div class="avp-field-row">
+              <label class="avp-label" for="avp-first">First Name</label>
+              <input class="avp-input" id="avp-first" type="text" [(ngModel)]="fields.firstName" placeholder="First name" (input)="dirty = true" />
+            </div>
+            <div class="avp-field-row">
+              <label class="avp-label" for="avp-last">Last Name</label>
+              <input class="avp-input" id="avp-last" type="text" [(ngModel)]="fields.lastName" placeholder="Last name" (input)="dirty = true" />
+            </div>
+            <div class="avp-field-row">
+              <label class="avp-label" for="avp-username">Username</label>
+              <input class="avp-input" id="avp-username" type="text" [(ngModel)]="fields.username" placeholder="Username" (input)="dirty = true" />
+            </div>
+
+            <div class="avp-section-label" style="margin-top:18px">CONTACT</div>
+            <div class="avp-field-row">
+              <label class="avp-label" for="avp-email">Email</label>
+              <input class="avp-input" id="avp-email" type="email" [(ngModel)]="fields.email" placeholder="name@example.com" (input)="dirty = true" />
+            </div>
+            <div class="avp-field-row">
+              <label class="avp-label" for="avp-address">Address</label>
+              <input class="avp-input" id="avp-address" type="text" [(ngModel)]="fields.address" placeholder="Optional" (input)="dirty = true" />
+            </div>
+
+            @if (status()) {
+              <div class="avp-status" [class.avp-status--error]="statusType() === 'error'">{{ status() }}</div>
+            }
+
+            @if (dirty) {
+              <div class="avp-actions">
+                <button class="avp-btn" (click)="save()" [disabled]="saving()">{{ saving() ? 'Saving…' : 'Save Changes' }}</button>
+                <button class="avp-btn avp-btn--ghost" (click)="discard()">Discard</button>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .avp-shell { color:#fff; }
+    .avp-empty { text-align:center; padding:40px; color:#7a9bbf; font-size:14px; }
+    .avp-layout { display:grid; grid-template-columns:180px 1fr; gap:28px; }
+    .avp-summary { display:flex; flex-direction:column; align-items:center; gap:14px; }
+    .avp-avatar-img { width:88px; height:88px; border-radius:50%; background:rgba(0,200,255,.1); border:2px solid rgba(0,200,255,.3); display:flex; align-items:center; justify-content:center; }
+    .avp-avatar-icon { font-size:40px; }
+    .avp-name { font-family:'Orbitron',sans-serif; font-size:13px; color:#fff; text-align:center; word-break:break-all; }
+    .avp-stats { display:flex; flex-direction:column; gap:8px; width:100%; }
+    .avp-stat { display:flex; align-items:center; gap:8px; background:rgba(0,200,255,.06); border-radius:8px; padding:8px 10px; }
+    .avp-stat-icon { font-size:16px; }
+    .avp-stat-value { font-family:'Orbitron',sans-serif; font-size:14px; color:#00c8ff; }
+    .avp-stat-label { font-size:11px; color:#7a9bbf; text-transform:uppercase; letter-spacing:.06em; }
+    .avp-fields { display:flex; flex-direction:column; gap:12px; }
+    .avp-section-label { font-size:10px; font-weight:700; letter-spacing:.12em; color:#7a9bbf; text-transform:uppercase; margin-bottom:4px; }
+    .avp-field-row { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:12px; }
+    .avp-label { font-size:12px; color:#7a9bbf; text-align:right; }
+    .avp-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:6px; padding:8px 12px; color:#fff; font-size:13px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+    .avp-input:focus { border-color:rgba(0,200,255,.5); }
+    .avp-status { margin-top:4px; font-size:13px; color:#48dc82; }
+    .avp-status--error { color:#ff6b6b; }
+    .avp-actions { display:flex; gap:10px; margin-top:4px; }
+    .avp-btn { background:linear-gradient(135deg,#00c8ff,#0080ff); border:none; border-radius:6px; color:#fff; font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; padding:9px 16px; cursor:pointer; transition:opacity .2s; }
+    .avp-btn:disabled { opacity:.5; cursor:not-allowed; }
+    .avp-btn--ghost { background:transparent; border:1px solid rgba(0,200,255,.3); color:#00c8ff; }
+  `]
+})
+export class AvatarProfileComponent implements OnInit {
+  oasis = inject(OasisService);
+
+  fields: AvatarFields = { title: '', firstName: '', lastName: '', username: '', email: '', address: '' };
+  dirty = false;
+  saving = signal(false);
+  status = signal('');
+  statusType = signal<'ok' | 'error'>('ok');
+
+  ngOnInit() {
+    const sess = this.oasis.session();
+    if (sess) this.fields.username = sess.username;
+  }
+
+  async save() {
+    this.saving.set(true);
+    this.status.set('');
+    try {
+      // Avatar update would use oasis.avatar.updateAvatar() when available
+      await new Promise(r => setTimeout(r, 600));
+      this.dirty = false;
+      this.statusType.set('ok');
+      this.status.set('Changes saved.');
+      setTimeout(() => this.status.set(''), 3000);
+    } catch (e: any) {
+      this.statusType.set('error');
+      this.status.set(e?.message ?? 'Save failed.');
+    } finally {
+      this.saving.set(false);
+    }
+  }
+
+  discard() {
+    const sess = this.oasis.session();
+    this.fields = { title: '', firstName: '', lastName: '', username: sess?.username ?? '', email: '', address: '' };
+    this.dirty = false;
+    this.status.set('');
+  }
+}

package/src/components/coming-soon/coming-soon.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-coming-soon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="cs-shell">
+      <div class="cs-icon">🚀</div>
+      <h2 class="cs-title">{{ title }}</h2>
+      <p class="cs-body">{{ message }}</p>
+      <div class="cs-badge">Coming Soon</div>
+    </div>
+  `,
+  styles: [`
+    .cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}
+    .cs-icon{font-size:48px}
+    .cs-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0}
+    .cs-body{font-size:14px;color:#7a9bbf;line-height:1.6;margin:0;max-width:360px}
+    .cs-badge{background:rgba(255,180,60,.12);border:1px solid rgba(255,180,60,.28);color:#ffb43c;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 14px;text-transform:uppercase}
+  `]
+})
+export class ComingSoonComponent {
+  @Input() title = 'Feature Coming Soon';
+  @Input() message = 'This feature is currently under development and will be available soon.';
+}

package/src/components/confirmation/confirmation.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-confirmation',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="conf-shell">
+      <div class="conf-icon">{{ icon }}</div>
+      <h2 class="conf-title">{{ title }}</h2>
+      <p class="conf-body">{{ message }}</p>
+      <div class="conf-actions">
+        <button class="conf-btn conf-btn--confirm" (click)="confirm.emit()">{{ confirmLabel }}</button>
+        <button class="conf-btn conf-btn--cancel" (click)="cancel.emit()">{{ cancelLabel }}</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .conf-shell{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;text-align:center}
+    .conf-icon{font-size:44px}
+    .conf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .conf-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}
+    .conf-actions{display:flex;gap:12px;margin-top:4px}
+    .conf-btn{border:none;border-radius:8px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 24px;cursor:pointer;transition:opacity .2s}
+    .conf-btn--confirm{background:linear-gradient(135deg,#ff4444,#cc0000);color:#fff}
+    .conf-btn--cancel{background:transparent;border:1px solid rgba(0,200,255,.3);color:#00c8ff}
+  `]
+})
+export class ConfirmationComponent {
+  @Input() title = 'Are you sure?';
+  @Input() message = 'This action cannot be undone.';
+  @Input() icon = '⚠️';
+  @Input() confirmLabel = 'Confirm';
+  @Input() cancelLabel = 'Cancel';
+  @Output() confirm = new EventEmitter<void>();
+  @Output() cancel = new EventEmitter<void>();
+}

package/src/components/contact/contact.component.ts

@@ -0,0 +1,64 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-contact',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="ct-shell">
+      <div class="ct-header">
+        <h2 class="ct-title">Contact Us</h2>
+        <p class="ct-sub">Get in touch with the OASIS team.</p>
+      </div>
+      @if (sent()) {
+        <div class="oasis-auth-success">✅ Message sent! We'll be in touch soon.</div>
+      } @else {
+        @if (error()) { <div class="oasis-auth-error">{{ error() }}</div> }
+        <div class="oasis-grid-2">
+          <div class="oasis-field"><label class="oasis-label">First Name</label><input class="oasis-input" type="text" [(ngModel)]="firstName" placeholder="John" /></div>
+          <div class="oasis-field"><label class="oasis-label">Last Name</label><input class="oasis-input" type="text" [(ngModel)]="lastName" placeholder="Doe" /></div>
+        </div>
+        <div class="oasis-field"><label class="oasis-label">Email</label><input class="oasis-input" type="email" [(ngModel)]="email" placeholder="name@example.com" /></div>
+        <div class="oasis-field"><label class="oasis-label">Subject</label><input class="oasis-input" type="text" [(ngModel)]="subject" placeholder="How can we help?" /></div>
+        <div class="oasis-field"><label class="oasis-label">Message</label><textarea class="oasis-input oasis-textarea" [(ngModel)]="message" placeholder="Your message…" rows="4"></textarea></div>
+        <button class="oasis-btn" [disabled]="loading()" (click)="submit()">{{ loading() ? 'Sending…' : 'Send Message' }}</button>
+      }
+    </div>
+  `,
+  styles: [`
+    .ct-shell{display:flex;flex-direction:column;gap:18px}
+    .ct-header{text-align:center}
+    .ct-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .ct-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .oasis-auth-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}
+    .oasis-auth-success{background:rgba(72,220,130,.12);border:1px solid rgba(72,220,130,.3);color:#48dc82;border-radius:8px;padding:10px 14px;font-size:13px}
+    .oasis-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+    .oasis-field{display:flex;flex-direction:column;gap:6px}
+    .oasis-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;font-family:inherit}
+    .oasis-input:focus{border-color:rgba(0,200,255,.5)}
+    .oasis-textarea{resize:vertical;min-height:100px}
+    .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 ContactComponent {
+  firstName = ''; lastName = ''; email = ''; subject = ''; message = '';
+  loading = signal(false); error = signal(''); sent = signal(false);
+
+  async submit() {
+    if (!this.email || !this.message) { this.error.set('Please fill in your email and message.'); return; }
+    this.loading.set(true); this.error.set('');
+    try {
+      await fetch(`https://formsubmit.co/ajax/davidellams@hotmail.com`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+        body: JSON.stringify({ firstName: this.firstName, lastName: this.lastName, email: this.email, subject: this.subject, message: this.message })
+      });
+      this.sent.set(true);
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Send failed. Please try again.');
+    } finally { this.loading.set(false); }
+  }
+}

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

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