@oasisomniverse/angular 1.0.0

package/src/components/game/view-leagues.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-leagues',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="lg-shell">
+      <div class="lg-header"><span>🏅</span><h2 class="lg-title">Leagues</h2></div>
+      <div class="lg-table-wrap">
+        <table class="lg-table">
+          <thead><tr><th>Rank</th><th>League</th><th>Members</th><th>Season Points</th><th>Status</th></tr></thead>
+          <tbody>
+            @for (l of leagues(); track l.rank) {
+              <tr><td>{{ l.rank }}</td><td>{{ l.name }}</td><td>{{ l.members }}</td><td>{{ l.points }}</td><td><span class="lg-status lg-status--{{ l.status.toLowerCase() }}">{{ l.status }}</span></td></tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <div class="lg-footer"><button class="lg-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .lg-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .lg-header{display:flex;align-items:center;gap:10px}
+    .lg-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .lg-table-wrap{overflow-x:auto;border:1px solid rgba(0,200,255,.15);border-radius:10px}
+    .lg-table{width:100%;border-collapse:collapse;font-size:13px}
+    .lg-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)}
+    .lg-table td{color:#c8dff0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
+    .lg-status{border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700}
+    .lg-status--active{background:rgba(0,200,100,.15);color:#00c864;border:1px solid rgba(0,200,100,.3)}
+    .lg-status--closed{background:rgba(122,155,191,.1);color:#7a9bbf;border:1px solid rgba(122,155,191,.25)}
+    .lg-footer{display:flex;justify-content:flex-end}
+    .lg-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 ViewLeaguesComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  leagues = signal([
+    { rank:1, name:'Platinum League', members:128, points:9800, status:'Active' },
+    { rank:2, name:'Gold League', members:256, points:6500, status:'Active' },
+    { rank:3, name:'Silver League', members:512, points:3200, status:'Active' },
+    { rank:4, name:'Bronze League', members:1024, points:1100, status:'Closed' },
+  ]);
+}

package/src/components/game/view-tournaments.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-tournaments',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="tn-shell">
+      <div class="tn-header"><span>⚔️</span><h2 class="tn-title">Tournaments</h2></div>
+      <div class="tn-list">
+        @for (t of tournaments(); track t.id) {
+          <div class="tn-card">
+            <div class="tn-status tn-status--{{ t.status.toLowerCase() }}">{{ t.status }}</div>
+            <div class="tn-name">{{ t.name }}</div>
+            <div class="tn-meta">{{ t.participants }} participants · Prize: {{ t.prize }}</div>
+            <div class="tn-date">{{ t.date }}</div>
+          </div>
+        }
+      </div>
+      <div class="tn-footer"><button class="tn-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .tn-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .tn-header{display:flex;align-items:center;gap:10px}
+    .tn-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .tn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
+    .tn-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px}
+    .tn-status{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 10px;align-self:flex-start;border:1px solid currentColor}
+    .tn-status--open{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .tn-status--upcoming{color:#5ba8ff;border-color:rgba(91,168,255,.3)}
+    .tn-status--closed{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .tn-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .tn-meta{font-size:12px;color:#7a9bbf}
+    .tn-date{font-size:11px;color:#5ba8ff}
+    .tn-footer{display:flex;justify-content:flex-end}
+    .tn-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 ViewTournamentsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  tournaments = signal([
+    { id:1, name:'Galactic Cup 2026', participants:64, prize:'500 SEEDS', status:'Open', date:'2026-07-15' },
+    { id:2, name:'Neon Arena Finals', participants:32, prize:'1 ETH', status:'Upcoming', date:'2026-08-01' },
+    { id:3, name:'Star Wars Classic', participants:128, prize:'200 SEEDS', status:'Closed', date:'2026-06-01' },
+  ]);
+}

package/src/components/hyperdrive/hyperdrive.component.ts

@@ -0,0 +1,81 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-hyperdrive',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="hd-shell">
+      <div class="hd-header"><h2 class="hd-title">🚀 HyperDrive</h2><p class="hd-sub">Quantum-speed data layer for the OASIS Omniverse.</p></div>
+      <div class="hd-status-card" [class.hd-status-card--active]="active()">
+        <div class="hd-status-icon">{{ active() ? '⚡' : '💤' }}</div>
+        <div class="hd-status-info">
+          <div class="hd-status-label">HyperDrive Status</div>
+          <div class="hd-status-val" [class.hd-status-val--on]="active()">{{ active() ? 'ACTIVE' : 'OFFLINE' }}</div>
+        </div>
+        <button class="hd-toggle-btn" [class.hd-toggle-btn--on]="active()" (click)="active.set(!active())">{{ active() ? 'Disengage' : 'Engage' }}</button>
+      </div>
+      @if (active()) {
+        <div class="hd-metrics">
+          @for (m of metrics; track m.label) {
+            <div class="hd-metric-card">
+              <div class="hd-metric-val">{{ m.value }}</div>
+              <div class="hd-metric-label">{{ m.label }}</div>
+            </div>
+          }
+        </div>
+        <div class="hd-nodes">
+          <div class="hd-nodes-header">Connected Nodes</div>
+          @for (n of nodes; track n.id) {
+            <div class="hd-node">
+              <div class="hd-node-dot hd-node-dot--{{ n.status }}"></div>
+              <div class="hd-node-name">{{ n.name }}</div>
+              <div class="hd-node-latency">{{ n.latency }}ms</div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .hd-shell{display:flex;flex-direction:column;gap:18px}
+    .hd-header{text-align:center}
+    .hd-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .hd-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .hd-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;transition:border-color .2s}
+    .hd-status-card--active{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.05)}
+    .hd-status-icon{font-size:28px}
+    .hd-status-info{flex:1}
+    .hd-status-label{font-size:12px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}
+    .hd-status-val{font-family:'Orbitron',sans-serif;font-size:16px;color:#7a9bbf;margin-top:2px}
+    .hd-status-val--on{color:#00c8ff}
+    .hd-toggle-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 20px;cursor:pointer;transition:opacity .2s}
+    .hd-toggle-btn--on{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}
+    .hd-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
+    .hd-metric-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}
+    .hd-metric-val{font-family:'Share Tech Mono',monospace;font-size:20px;color:#00c8ff;font-weight:600}
+    .hd-metric-label{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
+    .hd-nodes{display:flex;flex-direction:column;gap:8px}
+    .hd-nodes-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}
+    .hd-node{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.07);border-radius:8px}
+    .hd-node-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+    .hd-node-dot--active{background:#48dc82;box-shadow:0 0 6px #48dc82}
+    .hd-node-dot--idle{background:#7a9bbf}
+    .hd-node-name{flex:1;font-size:13px;color:#e0f0ff}
+    .hd-node-latency{font-family:'Share Tech Mono',monospace;font-size:12px;color:#7a9bbf}
+  `]
+})
+export class HyperDriveComponent {
+  active = signal(false);
+  metrics = [
+    { label: 'Throughput', value: '4.2 TB/s' },
+    { label: 'Latency', value: '0.3ms' },
+    { label: 'Uptime', value: '99.98%' },
+  ];
+  nodes = [
+    { id: '1', name: 'ONODE Alpha — US East', status: 'active', latency: 12 },
+    { id: '2', name: 'ONODE Beta — EU West', status: 'active', latency: 28 },
+    { id: '3', name: 'ONODE Gamma — Asia Pacific', status: 'idle', latency: 55 },
+  ];
+}

package/src/components/karma/search-karma.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-karma',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sf-shell">
+      <div class="sf-header"><span>✨</span><h2 class="sf-title">Search Karma</h2></div>
+      <div class="sf-row"><input class="sf-input" [(ngModel)]="query" placeholder="Search by avatar name..." (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 SearchKarmaComponent {
+  @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/karma/view-avatar-karma.component.ts

@@ -0,0 +1,51 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-avatar-karma',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vak-shell">
+      <div class="vak-header"><span>⭐</span><h2 class="vak-title">Avatar Karma</h2></div>
+      <div class="vak-score">
+        <div class="vak-score-val">{{ totalKarma() }}</div>
+        <div class="vak-score-lbl">Total Karma Points</div>
+      </div>
+      <div class="vak-breakdown">
+        @for (k of karmaBreakdown(); track k.category) {
+          <div class="vak-row"><span class="vak-cat">{{ k.category }}</span><div class="vak-bar-wrap"><div class="vak-bar" [style.width.%]="k.pct"></div></div><span class="vak-pts">{{ k.points }}</span></div>
+        }
+      </div>
+      <div class="vak-footer"><button class="vak-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vak-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .vak-header{display:flex;align-items:center;gap:10px}
+    .vak-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vak-score{text-align:center;padding:20px;background:rgba(255,180,60,.06);border:1px solid rgba(255,180,60,.2);border-radius:12px}
+    .vak-score-val{font-family:'Orbitron',sans-serif;font-size:40px;font-weight:700;color:#ffb43c}
+    .vak-score-lbl{font-size:12px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
+    .vak-breakdown{display:flex;flex-direction:column;gap:10px}
+    .vak-row{display:flex;align-items:center;gap:12px}
+    .vak-cat{font-size:12px;color:#c8dff0;width:140px;flex-shrink:0}
+    .vak-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
+    .vak-bar{height:100%;background:linear-gradient(90deg,#ffb43c,#ff8c00);border-radius:999px;transition:width .4s}
+    .vak-pts{font-size:12px;color:#ffb43c;font-weight:700;width:40px;text-align:right}
+    .vak-footer{display:flex;justify-content:flex-end}
+    .vak-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 ViewAvatarKarmaComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  totalKarma = signal(840);
+  karmaBreakdown = signal([
+    { category: 'Quest Completion', points: 300, pct: 80 },
+    { category: 'Helping Others', points: 200, pct: 55 },
+    { category: 'NFT Minting', points: 150, pct: 40 },
+    { category: 'Community Votes', points: 120, pct: 32 },
+    { category: 'Seeds Donated', points: 70, pct: 19 },
+  ]);
+}

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

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-karma',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="vk-shell">
+      <div class="vk-header"><span>✨</span><h2 class="vk-title">View Karma</h2></div>
+      <div class="vk-table-wrap">
+        <table class="vk-table">
+          <thead><tr><th>Avatar</th><th>Karma</th><th>Level</th><th>Rank</th></tr></thead>
+          <tbody>
+            @for (k of karmaList(); track k.avatar) {
+              <tr><td>{{ k.avatar }}</td><td>{{ k.karma }}</td><td>{{ k.level }}</td><td>#{{ k.rank }}</td></tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <div class="vk-footer"><button class="vk-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vk-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .vk-header{display:flex;align-items:center;gap:10px}
+    .vk-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vk-table-wrap{overflow-x:auto;border:1px solid rgba(0,200,255,.15);border-radius:10px}
+    .vk-table{width:100%;border-collapse:collapse;font-size:13px}
+    .vk-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)}
+    .vk-table td{color:#c8dff0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
+    .vk-table tr:last-child td{border-bottom:none}
+    .vk-footer{display:flex;justify-content:flex-end}
+    .vk-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 ViewKarmaComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  karmaList = signal([
+    { avatar: 'CosmicSage', karma: 1500, level: 20, rank: 1 },
+    { avatar: 'StarWalker', karma: 840, level: 12, rank: 2 },
+    { avatar: 'NebulaDancer', karma: 420, level: 7, rank: 3 },
+    { avatar: 'VoidWatcher', karma: 210, level: 4, rank: 4 },
+  ]);
+}

package/src/components/karma/vote-karma.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-vote-karma',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="vok-shell">
+      <div class="vok-header"><span>🗳️</span><h2 class="vok-title">Vote Karma</h2></div>
+      <div class="vok-field"><label class="vok-lbl">Avatar Name</label><input class="vok-input" [(ngModel)]="avatarName" placeholder="Enter avatar name..." /></div>
+      <div class="vok-vote-row">
+        <button class="vok-upvote" (click)="vote('up')">👍 Upvote Karma</button>
+        <button class="vok-downvote" (click)="vote('down')">👎 Downvote Karma</button>
+      </div>
+      @if (message()) { <div class="vok-message">{{ message() }}</div> }
+      <div class="vok-footer"><button class="vok-cancel" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .vok-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .vok-header{display:flex;align-items:center;gap:10px}
+    .vok-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .vok-field{display:flex;flex-direction:column;gap:6px}
+    .vok-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .vok-input{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}
+    .vok-input:focus{border-color:rgba(0,200,255,.6)}
+    .vok-vote-row{display:flex;gap:12px}
+    .vok-upvote,.vok-downvote{flex:1;border:none;border-radius:8px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:12px;cursor:pointer;transition:opacity .2s}
+    .vok-upvote{background:linear-gradient(135deg,#00c864,#007840);color:#fff}
+    .vok-downvote{background:linear-gradient(135deg,#ff4444,#cc0000);color:#fff}
+    .vok-upvote:hover,.vok-downvote:hover{opacity:.85}
+    .vok-message{background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#c8dff0;font-size:13px;padding:12px 16px;text-align:center}
+    .vok-footer{display:flex;justify-content:flex-end}
+    .vok-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 VoteKarmaComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  avatarName = '';
+  message = signal('');
+  vote(direction: 'up' | 'down') {
+    if (!this.avatarName.trim()) { this.message.set('Please enter an avatar name.'); return; }
+    this.message.set(direction === 'up' ? 'Upvoted karma for ' + this.avatarName + '!' : 'Downvoted karma for ' + this.avatarName + '.');
+  }
+}

package/src/components/karma-panel/karma-panel.component.ts

@@ -0,0 +1,87 @@
+import { Component, signal, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OasisService } from '../../services/oasis.service';
+
+type Tab = 'records' | 'stats' | 'weightings';
+
+@Component({
+  selector: 'oasis-karma-panel',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="kp-shell">
+      <div class="kp-banner">
+        <div class="kp-stat">
+          <div class="kp-stat-label">KARMA</div>
+          <div class="kp-stat-value">{{ oasis.session()?.karma ?? '—' }}</div>
+        </div>
+        <div class="kp-stat">
+          <div class="kp-stat-label">LEVEL</div>
+          <div class="kp-stat-value kp-stat-value--level">{{ level() }}</div>
+        </div>
+        <div class="kp-stat">
+          <div class="kp-stat-label">AVATAR TYPE</div>
+          <div class="kp-stat-value kp-stat-value--type">User</div>
+        </div>
+      </div>
+
+      <div class="kp-tabs">
+        <button class="kp-tab" [class.kp-tab--active]="activeTab() === 'records'" (click)="activeTab.set('records')">Akashic Records</button>
+        <button class="kp-tab" [class.kp-tab--active]="activeTab() === 'stats'" (click)="activeTab.set('stats')">Stats</button>
+        <button class="kp-tab" [class.kp-tab--active]="activeTab() === 'weightings'" (click)="activeTab.set('weightings')">Weightings</button>
+      </div>
+
+      @if (activeTab() === 'records') {
+        <div class="kp-panel kp-empty">
+          <div class="kp-empty-icon">📜</div>
+          <p>No karma records found.<br>Complete actions in the OASIS ecosystem to build your Akashic Record.</p>
+        </div>
+      }
+      @if (activeTab() === 'stats') {
+        <div class="kp-panel kp-empty">
+          <div class="kp-empty-icon">📊</div>
+          <p>No stats available yet.</p>
+        </div>
+      }
+      @if (activeTab() === 'weightings') {
+        <div class="kp-panel">
+          <div class="kp-vote-banner">
+            <div>
+              <strong>Karma Voting</strong>
+              <p>Community voting to adjust karma weightings is coming soon.</p>
+            </div>
+            <button class="kp-btn-ghost">Vote on Weightings <span class="kp-soon">Coming Soon</span></button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .kp-shell { color:#fff; display:flex; flex-direction:column; gap:20px; }
+    .kp-banner { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
+    .kp-stat { background:rgba(0,200,255,.06); border:1px solid rgba(0,200,255,.12); border-radius:10px; padding:14px; text-align:center; }
+    .kp-stat-label { font-size:10px; font-weight:700; letter-spacing:.1em; color:#7a9bbf; text-transform:uppercase; margin-bottom:6px; }
+    .kp-stat-value { font-family:'Orbitron',sans-serif; font-size:22px; color:#00c8ff; }
+    .kp-stat-value--level { color:#a78bfa; }
+    .kp-stat-value--type { color:#48dc82; font-size:16px; }
+    .kp-tabs { display:flex; gap:4px; border-bottom:1px solid rgba(0,200,255,.12); }
+    .kp-tab { background:none; border:none; color:#7a9bbf; font-size:13px; padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; }
+    .kp-tab--active { color:#00c8ff; border-bottom-color:#00c8ff; }
+    .kp-panel { padding:16px 0; }
+    .kp-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 16px; text-align:center; color:#7a9bbf; font-size:13px; line-height:1.6; }
+    .kp-empty-icon { font-size:32px; }
+    .kp-vote-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.03); border:1px solid rgba(0,200,255,.1); border-radius:10px; padding:16px; font-size:13px; color:#a8bfd8; line-height:1.5; }
+    .kp-vote-banner strong { display:block; color:#fff; margin-bottom:4px; }
+    .kp-btn-ghost { flex-shrink:0; background:transparent; border:1px solid rgba(0,200,255,.3); color:#00c8ff; border-radius:6px; padding:8px 14px; font-size:12px; cursor:pointer; white-space:nowrap; }
+    .kp-soon { display:inline-block; background:rgba(255,180,60,.15); color:#ffb43c; border-radius:999px; font-size:9px; padding:2px 6px; margin-left:6px; letter-spacing:.06em; vertical-align:middle; }
+  `]
+})
+export class KarmaPanelComponent {
+  oasis = inject(OasisService);
+  activeTab = signal<Tab>('records');
+
+  level() {
+    const k = this.oasis.session()?.karma ?? 0;
+    return Math.floor(Math.sqrt(k / 100)) + 1;
+  }
+}

package/src/components/karma-toast/karma-toast.component.ts

@@ -0,0 +1,33 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OasisService } from '../../services/oasis.service';
+
+@Component({
+  selector: 'oasis-karma-toast',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (toast()) {
+      <div class="karma-toast">
+        <span class="kt-amount">+{{ toast()!.amount }} ✦</span>
+        <span class="kt-msg">{{ toast()!.message }}</span>
+      </div>
+    }
+  `,
+  styles: [`
+    .karma-toast {
+      position: fixed; bottom: 32px; right: 32px; z-index: 9999;
+      background: linear-gradient(135deg, rgba(232,121,249,.15), rgba(168,85,247,.1));
+      border: 1px solid rgba(232,121,249,.4); border-radius: 14px;
+      padding: 16px 24px; display: flex; flex-direction: column; gap: 4px;
+      backdrop-filter: blur(12px);
+      animation: slideIn .35s ease;
+    }
+    .kt-amount { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900; color: #e879f9; }
+    .kt-msg { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #a8bfd8; }
+    @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+  `]
+})
+export class KarmaToastComponent {
+  toast = inject(OasisService).karmaToast;
+}

package/src/components/login/login.component.ts

@@ -0,0 +1,95 @@
+import { Component, signal, Output, EventEmitter, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { OasisService } from '../../services/oasis.service';
+
+@Component({
+  selector: 'oasis-login',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="oasis-auth-form">
+      <div class="oasis-auth-header">
+        <h2 class="oasis-auth-title">Beam In</h2>
+        <p class="oasis-auth-sub">Don't have an account? <a class="oasis-link" (click)="switchTo.emit('signup')" href="javascript:void(0)">Sign Up</a></p>
+      </div>
+
+      @if (error()) {
+        <div class="oasis-auth-error">{{ error() }}</div>
+      }
+
+      <div class="oasis-field">
+        <label class="oasis-label" for="oasis-login-username">Username</label>
+        <input class="oasis-input" id="oasis-login-username" type="text" [(ngModel)]="username" placeholder="yourusername" autocomplete="username" required />
+      </div>
+
+      <div class="oasis-field">
+        <label class="oasis-label" for="oasis-login-password">Password</label>
+        <div class="oasis-input-wrap">
+          <input class="oasis-input" id="oasis-login-password" [type]="showPwd ? 'text' : 'password'" [(ngModel)]="password" placeholder="••••••••" autocomplete="current-password" required />
+          <button class="oasis-pwd-toggle" type="button" (click)="showPwd = !showPwd" [attr.aria-label]="showPwd ? 'Hide password' : 'Show password'">
+            {{ showPwd ? '🙈' : '👁️' }}
+          </button>
+        </div>
+        <a class="oasis-link oasis-link--small" (click)="switchTo.emit('forgot')" href="javascript:void(0)">Forgot Password?</a>
+      </div>
+
+      <div class="oasis-field oasis-field--row">
+        <input class="oasis-checkbox" id="oasis-remember" type="checkbox" [(ngModel)]="rememberMe" />
+        <label class="oasis-label oasis-label--inline" for="oasis-remember">Remember Me</label>
+      </div>
+
+      <button class="oasis-btn" type="button" [disabled]="loading()" (click)="submit()">
+        {{ loading() ? 'Connecting…' : 'Beam In' }}
+      </button>
+    </div>
+  `,
+  styles: [`
+    .oasis-auth-form { display:flex; flex-direction:column; gap:20px; }
+    .oasis-auth-header { text-align:center; }
+    .oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:22px; color:#fff; margin:0 0 6px; }
+    .oasis-auth-sub { font-size:13px; color:#7a9bbf; margin:0; }
+    .oasis-auth-error { background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.3); color:#ff6b6b; border-radius:8px; padding:10px 14px; font-size:13px; }
+    .oasis-field { display:flex; flex-direction:column; gap:6px; }
+    .oasis-field--row { flex-direction:row; align-items:center; gap:10px; }
+    .oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+    .oasis-label--inline { text-transform:none; font-size:13px; color:#a8bfd8; }
+    .oasis-input-wrap { position:relative; }
+    .oasis-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:8px; padding:10px 14px; color:#fff; font-size:14px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+    .oasis-input:focus { border-color:rgba(0,200,255,.5); }
+    .oasis-input-wrap .oasis-input { padding-right:44px; }
+    .oasis-pwd-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:0; line-height:1; }
+    .oasis-checkbox { width:16px; height:16px; accent-color:#00c8ff; cursor:pointer; flex-shrink:0; }
+    .oasis-link { color:#00c8ff; text-decoration:none; cursor:pointer; }
+    .oasis-link--small { font-size:12px; margin-top:2px; }
+    .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 LoginComponent {
+  @Output() switchTo = new EventEmitter<'signup' | 'forgot'>();
+  @Output() loggedIn = new EventEmitter<void>();
+
+  private oasis = inject(OasisService);
+
+  username = '';
+  password = '';
+  rememberMe = false;
+  showPwd = false;
+  loading = signal(false);
+  error = signal('');
+
+  async submit() {
+    if (!this.username || !this.password) { this.error.set('Please fill in all fields.'); return; }
+    this.loading.set(true);
+    this.error.set('');
+    try {
+      await this.oasis.login(this.username, this.password);
+      this.loggedIn.emit();
+    } catch (e: any) {
+      this.error.set(e?.message ?? 'Login failed. Please check your credentials.');
+    } finally {
+      this.loading.set(false);
+    }
+  }
+}

package/src/components/map/add-2d-object-map.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-add-2d-object-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🗺️</span><h2 class="mf-title">Add 2D Object to Map</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Object Name</label><input class="mf-inp" placeholder="Object Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">X Position</label><input class="mf-inp" placeholder="X Position..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Y Position</label><input class="mf-inp" placeholder="Y Position..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Layer</label><input class="mf-inp" placeholder="Layer..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Description</label><input class="mf-inp" 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 Add2dObjectMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}