@oasisomniverse/angular 1.0.0

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

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-add-3d-object-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🌐</span><h2 class="mf-title">Add 3D 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">Z Position</label><input class="mf-inp" placeholder="Z Position..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Scale</label><input class="mf-inp" placeholder="Scale..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Model URL</label><input class="mf-inp" placeholder="Model URL..." /></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 Add3dObjectMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/map/add-quest-to-map.component.ts

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

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

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-download-our-world',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">⬇️</div>
+      <h2 class="popup-title">Download Our World</h2>
+      <p class="popup-body">UI Coming Soon — access this feature via the OASIS API from the Developer menu.</p>
+      <button class="popup-btn" (click)="close.emit()">OK</button>
+    </div>
+  `,
+  styles: [`
+    .popup-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
+    .popup-icon{font-size:48px}
+    .popup-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .popup-body{font-size:13px;color:#a8bfd8;line-height:1.6;margin:0;max-width:380px}
+    .popup-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer;transition:opacity .2s}
+    .popup-btn:hover{opacity:.85}
+  `]
+})
+export class DownloadOurWorldComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

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

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

package/src/components/map/map.component.ts

@@ -0,0 +1,70 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Location { id: string; name: string; type: string; x: number; y: number; description: string }
+
+@Component({
+  selector: 'oasis-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="map-shell">
+      <div class="map-header"><h2 class="map-title">🗺️ OASIS Map</h2><p class="map-sub">Explore the OASIS Omniverse.</p></div>
+      <div class="map-viewport">
+        <div class="map-grid-bg"></div>
+        @for (loc of locations(); track loc.id) {
+          <div class="map-pin" [style.left.%]="loc.x" [style.top.%]="loc.y" [class.map-pin--selected]="selected()?.id === loc.id" (click)="selected.set(loc)" [title]="loc.name">
+            <div class="map-pin-dot">{{ locIcon(loc.type) }}</div>
+          </div>
+        }
+      </div>
+      @if (selected()) {
+        <div class="map-detail">
+          <div class="map-detail-name">{{ selected()!.name }}</div>
+          <div class="map-detail-type">{{ selected()!.type }}</div>
+          <div class="map-detail-desc">{{ selected()!.description }}</div>
+          <button class="map-btn" (click)="selected.set(null)">Close</button>
+        </div>
+      }
+      <div class="map-legend">
+        @for (t of types; track t.label) {
+          <div class="map-legend-item"><span>{{ t.icon }}</span><span>{{ t.label }}</span></div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .map-shell{display:flex;flex-direction:column;gap:16px}
+    .map-header{text-align:center}
+    .map-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .map-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .map-viewport{position:relative;height:300px;background:#030d1a;border:1px solid rgba(0,200,255,.2);border-radius:12px;overflow:hidden}
+    .map-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px);background-size:40px 40px}
+    .map-pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;transition:transform .2s}
+    .map-pin:hover{transform:translate(-50%,-50%) scale(1.2)}
+    .map-pin--selected .map-pin-dot{outline:2px solid #00c8ff;outline-offset:3px}
+    .map-pin-dot{font-size:22px}
+    .map-detail{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.2);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px}
+    .map-detail-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;flex:0 0 auto}
+    .map-detail-type{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
+    .map-detail-desc{font-size:12px;color:#7a9bbf;flex:1}
+    .map-btn{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:7px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:6px 14px;cursor:pointer}
+    .map-legend{display:flex;gap:16px;flex-wrap:wrap}
+    .map-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#7a9bbf}
+  `]
+})
+export class MapComponent {
+  types = [{ icon: '🏙️', label: 'City' }, { icon: '🌲', label: 'Nature' }, { icon: '⚔️', label: 'Quest Zone' }, { icon: '🏛️', label: 'Hub' }];
+  selected = signal<Location | null>(null);
+  locations = signal<Location[]>([
+    { id: '1', name: 'OASIS Hub Alpha', type: 'Hub', x: 20, y: 30, description: 'Central hub for OASIS operations and avatar registration.' },
+    { id: '2', name: 'Neon City', type: 'City', x: 55, y: 20, description: 'A sprawling cyberpunk metropolis in the OASIS.' },
+    { id: '3', name: 'Enchanted Forest', type: 'Nature', x: 75, y: 60, description: 'Ancient woodland teeming with rare seeds and creatures.' },
+    { id: '4', name: 'Battle Grounds', type: 'Quest Zone', x: 35, y: 70, description: 'Arena for quests, challenges, and PvP competitions.' },
+    { id: '5', name: 'Crystal Spire', type: 'Hub', x: 85, y: 35, description: 'Trading post and NFT marketplace in the sky.' },
+  ]);
+  locIcon(type: string) {
+    const m: Record<string, string> = { Hub: '🏛️', City: '🏙️', Nature: '🌲', 'Quest Zone': '⚔️' };
+    return m[type] ?? '📍';
+  }
+}

package/src/components/map/plot-route-on-map.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-plot-route-on-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>📍</span><h2 class="mf-title">Plot Route on Map</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Route Name</label><input class="mf-inp" placeholder="Route Name..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Start Location</label><input class="mf-inp" placeholder="Start Location..." /></div>
+        <div class="mf-field"><label class="mf-lbl">End Location</label><input class="mf-inp" placeholder="End Location..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Waypoints</label><input class="mf-inp" placeholder="Waypoints..." /></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 PlotRouteOnMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

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

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-search-map',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="sm-shell">
+      <div class="sm-header"><span>🔍</span><h2 class="sm-title">Search Map</h2></div>
+      <div class="sm-row"><input class="sm-input" [(ngModel)]="query" placeholder="Search locations, objects, quests..." (keyup.enter)="search()" /><button class="sm-btn" (click)="search()">Search</button></div>
+      @for (r of results(); track r.name) {
+        <div class="sm-card"><div class="sm-card-icon">{{ r.icon }}</div><div class="sm-card-info"><div class="sm-card-name">{{ r.name }}</div><div class="sm-card-type">{{ r.type }}</div></div></div>
+      }
+      <div class="sm-footer"><button class="sm-cancel" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .sm-shell{display:flex;flex-direction:column;gap:14px;padding:20px}
+    .sm-header{display:flex;align-items:center;gap:10px}
+    .sm-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .sm-row{display:flex;gap:10px}
+    .sm-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}
+    .sm-input:focus{border-color:rgba(0,200,255,.6)}
+    .sm-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}
+    .sm-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:8px;padding:10px 14px}
+    .sm-card-icon{font-size:24px}
+    .sm-card-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}
+    .sm-card-type{font-size:11px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
+    .sm-footer{display:flex;justify-content:flex-end}
+    .sm-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 SearchMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  query = '';
+  results = signal<{name:string;type:string;icon:string}[]>([]);
+  search() {
+    if (!this.query.trim()) return;
+    this.results.set([{ name: this.query + ' Hub', type: 'Location', icon: '🏛️' }]);
+  }
+}

package/src/components/map/view-global-3d-map.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-global-3d-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">🌍</div>
+      <h2 class="popup-title">View Global 3D Map</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 ViewGlobal3dMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/map/view-halons-on-map.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-halons-on-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">🔮</div>
+      <h2 class="popup-title">View Halons on Map</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 ViewHalonsOnMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/map/view-oapp-on-map.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-oapp-on-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">📱</div>
+      <h2 class="popup-title">View OAPPs on Map</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 ViewOappOnMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

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

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-view-quest-on-map',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">⚔️</div>
+      <h2 class="popup-title">View Quest on Map</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 ViewQuestOnMapComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/menu-message/menu-message.component.ts

@@ -0,0 +1,69 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Action { label: string; onClick: () => void; }
+type MessageType = 'info' | 'success' | 'warning' | 'error';
+
+const TYPE_COLORS: Record<MessageType, { border: string; bg: string }> = {
+  info:    { border: 'rgba(0,200,255,.25)', bg: 'rgba(0,200,255,.05)' },
+  success: { border: 'rgba(72,220,130,.25)', bg: 'rgba(72,220,130,.05)' },
+  warning: { border: 'rgba(255,180,60,.25)', bg: 'rgba(255,180,60,.05)' },
+  error:   { border: 'rgba(255,80,80,.25)', bg: 'rgba(255,80,80,.05)' },
+};
+
+@Component({
+  selector: 'app-menu-message',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (visible()) {
+      <div class="mm-shell" [style.border]="'1px solid ' + colors().border" [style.background]="colors().bg">
+        <div class="mm-header">
+          <span class="mm-icon">{{ icon }}</span>
+          <span class="mm-title">{{ title }}</span>
+          @if (badge) { <span class="mm-badge">{{ badge }}</span> }
+          <button class="mm-close" (click)="dismiss()" aria-label="Dismiss">✕</button>
+        </div>
+        <div class="mm-body">
+          @if (message) { <p class="mm-msg">{{ message }}</p> }
+          @if (actions.length > 0) {
+            <div class="mm-actions">
+              @for (a of actions; track $index; let i = $index) {
+                <button [class]="i === 0 ? 'mm-btn' : 'mm-btn-ghost'" (click)="a.onClick()">{{ a.label }}</button>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `,
+  styles: [`
+    .mm-shell { font-family: 'Rajdhani', sans-serif; border-radius: 12px; overflow: hidden; }
+    .mm-header { padding: 14px 18px; background: rgba(0,200,255,.07); border-bottom: 1px solid rgba(0,200,255,.12); display: flex; align-items: center; gap: 12px; }
+    .mm-icon { font-size: 20px; }
+    .mm-title { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; color: #fff; flex: 1; }
+    .mm-badge { display: inline-block; background: rgba(0,200,255,.12); border: 1px solid rgba(0,200,255,.3); color: #00c8ff; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 12px; text-transform: uppercase; }
+    .mm-close { background: none; border: none; color: #7a9bbf; font-size: 18px; cursor: pointer; line-height: 1; }
+    .mm-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
+    .mm-msg { font-size: 14px; color: #a8bfd8; line-height: 1.65; text-align: center; margin: 0; }
+    .mm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
+    .mm-btn { background: linear-gradient(135deg,#00c8ff,#0080ff); border: none; border-radius: 8px; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 9px 22px; cursor: pointer; }
+    .mm-btn-ghost { background: transparent; border: 1px solid rgba(0,200,255,.3); border-radius: 8px; color: #00c8ff; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 9px 22px; cursor: pointer; }
+  `],
+})
+export class MenuMessageComponent {
+  @Input() title = 'Notice';
+  @Input() message = '';
+  @Input() icon = 'ℹ️';
+  @Input() type: MessageType = 'info';
+  @Input() badge = '';
+  @Input() actions: Action[] = [];
+  @Output() dismissed = new EventEmitter<void>();
+
+  visible = signal(true);
+  colors = signal(TYPE_COLORS.info);
+
+  ngOnChanges() { this.colors.set(TYPE_COLORS[this.type] ?? TYPE_COLORS.info); }
+
+  dismiss() { this.visible.set(false); this.dismissed.emit(); }
+}

package/src/components/messages/message.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'oasis-message',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="msg-shell">
+      <div class="msg-header"><span>✉️</span><h2 class="msg-title">Message</h2></div>
+      <div class="msg-thread">
+        @for (m of messages(); track m.id) {
+          <div class="msg-bubble" [class.msg-bubble--mine]="m.mine">
+            <div class="msg-sender">{{ m.sender }}</div>
+            <div class="msg-text">{{ m.text }}</div>
+            <div class="msg-time">{{ m.time }}</div>
+          </div>
+        }
+      </div>
+      <div class="msg-compose">
+        <input class="msg-input" [(ngModel)]="draft" placeholder="Type a message..." (keyup.enter)="send()" />
+        <button class="msg-send" (click)="send()">Send</button>
+      </div>
+      <div class="msg-footer"><button class="msg-cancel" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .msg-shell{display:flex;flex-direction:column;gap:14px;padding:20px}
+    .msg-header{display:flex;align-items:center;gap:10px}
+    .msg-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .msg-thread{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;padding:4px 0}
+    .msg-bubble{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:10px 14px;max-width:80%}
+    .msg-bubble--mine{align-self:flex-end;background:rgba(0,200,255,.1);border-color:rgba(0,200,255,.25)}
+    .msg-sender{font-size:11px;font-weight:700;color:#5ba8ff;margin-bottom:4px}
+    .msg-text{font-size:13px;color:#c8dff0}
+    .msg-time{font-size:10px;color:#7a9bbf;margin-top:4px;text-align:right}
+    .msg-compose{display:flex;gap:10px}
+    .msg-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}
+    .msg-input:focus{border-color:rgba(0,200,255,.6)}
+    .msg-send{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 18px;cursor:pointer;white-space:nowrap}
+    .msg-footer{display:flex;justify-content:flex-end}
+    .msg-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 MessageComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  draft = '';
+  messages = signal([
+    { id:1, sender:'CosmicSage', text:'Welcome to the OASIS!', time:'10:30', mine:false },
+    { id:2, sender:'You', text:'Thanks! Great to be here.', time:'10:31', mine:true },
+  ]);
+  send() {
+    if (!this.draft.trim()) return;
+    this.messages.update(m => [...m, { id: m.length+1, sender:'You', text:this.draft, time:new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}), mine:true }]);
+    this.draft = '';
+  }
+}

package/src/components/messaging/messaging.component.ts

@@ -0,0 +1,89 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+interface Message { id: string; from: string; preview: string; time: string; read: boolean; body: string }
+
+@Component({
+  selector: 'oasis-messaging',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="msg-shell">
+      <div class="msg-sidebar">
+        <div class="msg-search-wrap"><input class="msg-search" type="text" [(ngModel)]="searchQuery" placeholder="Search messages…" /></div>
+        <div class="msg-list">
+          @for (m of filtered(); track m.id) {
+            <div class="msg-item" [class.msg-item--active]="selected()?.id === m.id" [class.msg-item--unread]="!m.read" (click)="open(m)">
+              <div class="msg-from">{{ m.from }}</div>
+              <div class="msg-preview">{{ m.preview }}</div>
+              <div class="msg-time">{{ m.time }}</div>
+            </div>
+          }
+          @if (filtered().length === 0) { <div class="msg-empty">No messages found.</div> }
+        </div>
+      </div>
+      <div class="msg-main">
+        @if (selected()) {
+          <div class="msg-detail-header"><div class="msg-detail-from">{{ selected()!.from }}</div><div class="msg-detail-time">{{ selected()!.time }}</div></div>
+          <div class="msg-body">{{ selected()!.body }}</div>
+          <div class="msg-reply-wrap">
+            <textarea class="msg-reply-input" [(ngModel)]="reply" placeholder="Write a reply…" rows="3"></textarea>
+            <button class="oasis-btn" [disabled]="!reply.trim()" (click)="sendReply()">Send</button>
+          </div>
+        } @else {
+          <div class="msg-placeholder">📬 Select a message to read it</div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .msg-shell{display:grid;grid-template-columns:280px 1fr;height:480px;border:1px solid rgba(0,200,255,.15);border-radius:12px;overflow:hidden}
+    .msg-sidebar{border-right:1px solid rgba(0,200,255,.1);display:flex;flex-direction:column}
+    .msg-search-wrap{padding:12px;border-bottom:1px solid rgba(0,200,255,.1)}
+    .msg-search{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:8px 12px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}
+    .msg-list{flex:1;overflow-y:auto}
+    .msg-item{padding:12px 14px;border-bottom:1px solid rgba(0,200,255,.07);cursor:pointer;transition:background .15s}
+    .msg-item:hover{background:rgba(0,200,255,.06)}
+    .msg-item--active{background:rgba(0,200,255,.1);border-left:3px solid #00c8ff}
+    .msg-item--unread .msg-from{font-weight:700}
+    .msg-from{font-size:13px;color:#e0f0ff;margin-bottom:3px}
+    .msg-preview{font-size:12px;color:#7a9bbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .msg-time{font-size:11px;color:#4a6a88;margin-top:4px}
+    .msg-empty{padding:24px;text-align:center;color:#4a6a88;font-size:13px}
+    .msg-main{display:flex;flex-direction:column;background:rgba(0,0,0,.2)}
+    .msg-placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:#4a6a88;font-size:14px}
+    .msg-detail-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,200,255,.1)}
+    .msg-detail-from{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff}
+    .msg-detail-time{font-size:12px;color:#4a6a88}
+    .msg-body{flex:1;padding:20px;font-size:14px;color:#a8bfd8;line-height:1.7;overflow-y:auto}
+    .msg-reply-wrap{padding:16px;border-top:1px solid rgba(0,200,255,.1);display:flex;flex-direction:column;gap:10px}
+    .msg-reply-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:13px;outline:none;resize:none;box-sizing:border-box;font-family:inherit}
+    .oasis-btn{align-self:flex-end;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:9px 24px;cursor:pointer;transition:opacity .2s}
+    .oasis-btn:disabled{opacity:.4;cursor:not-allowed}
+  `]
+})
+export class MessagingComponent {
+  searchQuery = ''; reply = '';
+  selected = signal<Message | null>(null);
+  messages = signal<Message[]>([
+    { id: '1', from: 'OASIS Team', preview: 'Welcome to the OASIS network!', time: 'Just now', read: false, body: 'Welcome to the OASIS Omniverse! Your avatar is now connected to the network. Explore NFTs, karma, quests and more.' },
+    { id: '2', from: 'System', preview: 'Your karma level has increased.', time: '2h ago', read: true, body: 'Congratulations! Your karma level has increased. Keep contributing to the community to unlock new features and NFTs.' },
+  ]);
+
+  filtered() {
+    const q = this.searchQuery.toLowerCase();
+    return this.messages().filter(m => m.from.toLowerCase().includes(q) || m.preview.toLowerCase().includes(q));
+  }
+
+  open(m: Message) {
+    m.read = true;
+    this.selected.set({ ...m });
+    this.reply = '';
+  }
+
+  sendReply() {
+    if (!this.reply.trim()) return;
+    this.reply = '';
+  }
+}