@oasisomniverse/vue 1.0.0

package/src/components/Map/Add2dObjectMap.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ name: string; lat: string; lng: string; imageUrl: string }] }>()
+const form = ref({ name: '', lat: '', lng: '', imageUrl: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🗺️ Add 2D Object to Map</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Object Name</label><input class="p-input" v-model="form.name" placeholder="Name this object" /></div>
+      <div class="p-row p-row--2col">
+        <div><label class="p-label">Latitude</label><input class="p-input" v-model="form.lat" placeholder="0.000000" /></div>
+        <div><label class="p-label">Longitude</label><input class="p-input" v-model="form.lng" placeholder="0.000000" /></div>
+      </div>
+      <div class="p-row"><label class="p-label">Image URL</label><input class="p-input" v-model="form.imageUrl" placeholder="https://..." /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Add to Map</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-row--2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.p-row--2col>div{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-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 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:10px 24px;cursor:pointer}
+</style>

package/src/components/Map/Add3dObjectMap.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ name: string; lat: string; lng: string; alt: string; modelUrl: string }] }>()
+const form = ref({ name: '', lat: '', lng: '', alt: '', modelUrl: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🌐 Add 3D Object to Map</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Object Name</label><input class="p-input" v-model="form.name" placeholder="Name this 3D object" /></div>
+      <div class="p-row p-row--3col">
+        <div><label class="p-label">Latitude</label><input class="p-input" v-model="form.lat" placeholder="0.000000" /></div>
+        <div><label class="p-label">Longitude</label><input class="p-input" v-model="form.lng" placeholder="0.000000" /></div>
+        <div><label class="p-label">Altitude (m)</label><input class="p-input" v-model="form.alt" placeholder="0" /></div>
+      </div>
+      <div class="p-row"><label class="p-label">3D Model URL (.glb / .gltf)</label><input class="p-input" v-model="form.modelUrl" placeholder="https://..." /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Add to Map</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-row--3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.p-row--3col>div{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-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 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:10px 24px;cursor:pointer}
+</style>

package/src/components/Map/AddQuestToMap.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ questId: string; lat: string; lng: string }] }>()
+const form = ref({ questId: '', lat: '', lng: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🗺️ Add Quest to Map</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Quest ID</label><input class="p-input" v-model="form.questId" placeholder="Enter quest ID" /></div>
+      <div class="p-row p-row--2col">
+        <div><label class="p-label">Latitude</label><input class="p-input" v-model="form.lat" placeholder="0.000000" /></div>
+        <div><label class="p-label">Longitude</label><input class="p-input" v-model="form.lng" placeholder="0.000000" /></div>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Add Quest</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-row--2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.p-row--2col>div{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-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 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:10px 24px;cursor:pointer}
+</style>

package/src/components/Map/DownloadOurWorld.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: []; download: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🌍</div>
+    <h2 class="p-title">Download Our World</h2>
+    <p class="p-body">Download the full Our World map for offline use, including all quest locations, 3D objects, and HolON data embedded in the terrain.</p>
+    <div class="p-size">Estimated size: <strong>2.4 GB</strong></div>
+    <div class="p-actions">
+      <button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button>
+      <button class="p-btn" @click="emit('download')">Download</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:54px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-size{font-size:13px;color:#7a9bbf;background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.15);border-radius:8px;padding:8px 16px}.p-actions{display:flex;gap:12px}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:11px 28px;cursor:pointer}
+</style>

package/src/components/Map/ManageMap.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🗺️</div>
+    <h2 class="p-title">Manage Map</h2>
+    <p class="p-body">Advanced map management tools are coming soon — including layer controls, object bulk editing, terrain sculpting, and Our World map publishing.</p>
+    <button class="p-btn" @click="emit('close')">OK</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Map/Map.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Location { id: string; name: string; type: string; x: number; y: number; description: string }
+const selected = ref<Location | null>(null)
+const locations = ref<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.' },
+])
+const types = [{ icon: '🏙️', label: 'City' }, { icon: '🌲', label: 'Nature' }, { icon: '⚔️', label: 'Quest Zone' }, { icon: '🏛️', label: 'Hub' }]
+const icons: Record<string, string> = { Hub: '🏛️', City: '🏙️', Nature: '🌲', 'Quest Zone': '⚔️' }
+function locIcon(type: string) { return icons[type] ?? '📍' }
+</script>
+<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>
+      <div v-for="loc in locations" :key="loc.id" class="map-pin" :class="{ 'map-pin--selected': selected?.id === loc.id }" :style="{ left: loc.x + '%', top: loc.y + '%' }" @click="selected = loc" :title="loc.name">
+        <div class="map-pin-dot">{{ locIcon(loc.type) }}</div>
+      </div>
+    </div>
+    <div v-if="selected" 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 = null">Close</button>
+    </div>
+    <div class="map-legend">
+      <div v-for="t in types" :key="t.label" class="map-legend-item"><span>{{ t.icon }}</span><span>{{ t.label }}</span></div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.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;border-radius:50%}.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}
+</style>

package/src/components/Map/PlotRouteOnMap.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ from: string; to: string; mode: string }] }>()
+const form = ref({ from: '', to: '', mode: 'Walking' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">📍 Plot Route on Map</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">From (coordinates or place)</label><input class="p-input" v-model="form.from" placeholder="Start location" /></div>
+      <div class="p-row"><label class="p-label">To (coordinates or place)</label><input class="p-input" v-model="form.to" placeholder="End location" /></div>
+      <div class="p-row">
+        <label class="p-label">Travel Mode</label>
+        <select class="p-input" v-model="form.mode">
+          <option>Walking</option><option>Driving</option><option>Flying</option><option>HolON Path</option>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Plot Route</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-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 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:10px 24px;cursor:pointer}
+</style>

package/src/components/Map/SearchMap.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; type: string }] }>()
+const form = ref({ query: '', type: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Map</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Search Term</label><input class="p-input" v-model="form.query" placeholder="Search locations, objects, quests..." /></div>
+      <div class="p-row">
+        <label class="p-label">Type</label>
+        <select class="p-input" v-model="form.type">
+          <option>All</option><option>Location</option><option>Quest</option><option>OAPP</option><option>HolON</option><option>3D Object</option>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Search</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-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 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:10px 24px;cursor:pointer}
+</style>

package/src/components/Map/ViewGlobal3dMap.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🌐</div>
+    <h2 class="p-title">View Global 3D Map</h2>
+    <p class="p-body">The global 3D map of Our World is coming soon — a fully immersive view of the entire OASIS planet including all player-built objects, quests, and HolONs.</p>
+    <button class="p-btn" @click="emit('close')">OK</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Map/ViewHalonsOnMap.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const halons = [
+  { name: 'London HolON', lat: '51.5074', lng: '-0.1278', members: 4200 },
+  { name: 'New York HolON', lat: '40.7128', lng: '-74.0060', members: 8100 },
+  { name: 'Tokyo HolON', lat: '35.6762', lng: '139.6503', members: 6300 },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔮 HolONs on Map</h2>
+    <div class="p-list">
+      <div v-for="h in halons" :key="h.name" class="p-item">
+        <span class="p-item-icon">🔮</span>
+        <div class="p-item-info">
+          <span class="p-item-name">{{ h.name }}</span>
+          <span class="p-item-desc">{{ h.lat }}, {{ h.lng }} · {{ h.members.toLocaleString() }} members</span>
+        </div>
+        <button class="p-view-btn">View</button>
+      </div>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:18px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-list{display:flex;flex-direction:column;gap:10px}.p-item{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:14px}.p-item-icon{font-size:24px;flex-shrink:0}.p-item-info{display:flex;flex-direction:column;gap:3px;flex:1}.p-item-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700}.p-item-desc{font-size:12px;color:#7a9bbf}.p-view-btn{background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.3);border-radius:6px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;padding:6px 14px;cursor:pointer}.p-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:10px 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Map/ViewOappOnMap.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">📱</div>
+    <h2 class="p-title">View OAPPs on Map</h2>
+    <p class="p-body">See all OAPPs (OASIS Applications) pinned to real-world and virtual locations in Our World. This feature is coming soon.</p>
+    <button class="p-btn" @click="emit('close')">OK</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Map/ViewQuestOnMap.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{ questName?: string; lat?: string; lng?: string; description?: string }>()
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🗺️</div>
+    <h2 class="p-title">{{ questName ?? 'Quest Location' }}</h2>
+    <div class="p-coords" v-if="lat || lng">
+      <span class="p-coord-label">Coordinates</span>
+      <span class="p-coord-value">{{ lat ?? '0.0' }}, {{ lng ?? '0.0' }}</span>
+    </div>
+    <p class="p-body" v-if="description">{{ description }}</p>
+    <p class="p-body" v-else>Quest map integration is coming soon — you will be able to see quest locations, waypoints, and objectives overlaid on the Our World map.</p>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-coords{background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 16px;display:flex;flex-direction:column;gap:4px}.p-coord-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-coord-value{font-family:'Orbitron',sans-serif;font-size:14px;color:#00c8ff}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/MenuMessage/MenuMessage.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+interface Action { label: string; onClick: () => void; }
+type MessageType = 'info' | 'success' | 'warning' | 'error';
+
+const props = withDefaults(defineProps<{
+  title?: string;
+  message?: string;
+  icon?: string;
+  type?: MessageType;
+  badge?: string;
+  actions?: Action[];
+}>(), {
+  title: 'Notice',
+  message: '',
+  icon: 'ℹ️',
+  type: 'info',
+  badge: '',
+  actions: () => [],
+});
+
+const emit = defineEmits<{ dismissed: [] }>();
+
+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)' },
+};
+
+const visible = ref(true);
+const colors = computed(() => TYPE_COLORS[props.type] ?? TYPE_COLORS.info);
+
+function dismiss() { visible.value = false; emit('dismissed'); }
+</script>
+
+<template>
+  <div v-if="visible" class="mm-shell" :style="{ border: `1px solid ${colors.border}`, background: colors.bg }">
+    <div class="mm-header">
+      <span class="mm-icon">{{ icon }}</span>
+      <span class="mm-title">{{ title }}</span>
+      <span v-if="badge" class="mm-badge">{{ badge }}</span>
+      <button class="mm-close" @click="dismiss" aria-label="Dismiss">✕</button>
+    </div>
+    <div class="mm-body">
+      <p v-if="message" class="mm-msg">{{ message }}</p>
+      <div v-if="actions.length > 0" class="mm-actions">
+        <button
+          v-for="(a, i) in actions"
+          :key="i"
+          :class="i === 0 ? 'mm-btn' : 'mm-btn-ghost'"
+          @click="a.onClick()"
+        >{{ a.label }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.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; }
+</style>

package/src/components/Message/Message.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Contact { name: string; lastMessage: string; date: string; active: boolean }
+interface Msg { from: string; date: string; message: string }
+const contacts: Contact[] = [
+  { name: 'Alice', lastMessage: 'See you in Our World!', date: 'Today', active: true },
+  { name: 'Bob', lastMessage: 'Quest complete!', date: 'Yesterday', active: false },
+]
+const messages: Msg[] = [
+  { from: 'Alice', date: '10:00 am', message: 'Hey! Are you joining the quest later?' },
+  { from: 'me', date: '10:02 am', message: 'Yes! Just finishing up some karma votes.' },
+  { from: 'Alice', date: '10:05 am', message: 'Great, see you in Our World!' },
+]
+const draft = ref('')
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="msg-shell">
+    <div class="msg-sidebar">
+      <div class="msg-sidebar-title">Messages</div>
+      <div v-for="c in contacts" :key="c.name" class="msg-contact" :class="{ 'msg-contact--active': c.active }">
+        <div class="msg-contact-avatar">{{ c.name[0] }}</div>
+        <div class="msg-contact-info">
+          <span class="msg-contact-name">{{ c.name }}</span>
+          <span class="msg-contact-last">{{ c.lastMessage }}</span>
+        </div>
+        <span class="msg-contact-date">{{ c.date }}</span>
+      </div>
+    </div>
+    <div class="msg-main">
+      <div class="msg-header">
+        <span class="msg-header-name">Alice</span>
+        <button class="msg-close-btn" @click="emit('close')">✕</button>
+      </div>
+      <div class="msg-feed">
+        <div v-for="(m, i) in messages" :key="i" class="msg-bubble" :class="m.from === 'me' ? 'msg-bubble--me' : 'msg-bubble--them'">
+          <span class="msg-text">{{ m.message }}</span>
+          <span class="msg-date">{{ m.date }}</span>
+        </div>
+      </div>
+      <form class="msg-compose" @submit.prevent="draft = ''">
+        <input class="msg-input" v-model="draft" placeholder="Type a message..." />
+        <button class="msg-send-btn" type="submit">Send</button>
+      </form>
+    </div>
+  </div>
+</template>
+<style scoped>
+.msg-shell{display:flex;height:420px;overflow:hidden;border-radius:12px}.msg-sidebar{width:200px;flex-shrink:0;border-right:1px solid rgba(0,200,255,.15);display:flex;flex-direction:column;overflow-y:auto}.msg-sidebar-title{font-family:'Orbitron',sans-serif;font-size:13px;color:#00c8ff;padding:16px 14px 10px;font-weight:700;letter-spacing:.06em}.msg-contact{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .2s}.msg-contact:hover{background:rgba(0,200,255,.05)}.msg-contact--active{background:rgba(0,200,255,.08)}.msg-contact-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#00c8ff,#0080ff);display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700;flex-shrink:0}.msg-contact-info{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:2px}.msg-contact-name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-contact-last{font-size:11px;color:#7a9bbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-contact-date{font-size:10px;color:#5a7a9a;flex-shrink:0}.msg-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.msg-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(0,200,255,.12)}.msg-header-name{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;font-weight:700}.msg-close-btn{background:none;border:none;color:#7a9bbf;font-size:16px;cursor:pointer;padding:4px 8px}.msg-feed{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.msg-bubble{display:flex;flex-direction:column;gap:3px;max-width:75%}.msg-bubble--me{align-self:flex-end;align-items:flex-end}.msg-bubble--them{align-self:flex-start;align-items:flex-start}.msg-text{background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.2);border-radius:10px;color:#fff;font-size:13px;padding:8px 12px;line-height:1.5}.msg-bubble--me .msg-text{background:rgba(0,128,255,.2);border-color:rgba(0,128,255,.3)}.msg-date{font-size:10px;color:#5a7a9a}.msg-compose{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(0,200,255,.12)}.msg-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:13px;padding:9px 12px;outline:none;transition:border-color .2s}.msg-input:focus{border-color:rgba(0,200,255,.5)}.msg-send-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:9px 18px;cursor:pointer;transition:opacity .2s}.msg-send-btn:hover{opacity:.85}
+</style>

package/src/components/Messaging/Messaging.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+interface Message { id: string; from: string; preview: string; time: string; read: boolean; body: string }
+const searchQuery = ref(''), reply = ref(''), selected = ref<Message | null>(null)
+const messages = ref<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.' },
+])
+const filtered = computed(() => {
+  const q = searchQuery.value.toLowerCase()
+  return messages.value.filter(m => m.from.toLowerCase().includes(q) || m.preview.toLowerCase().includes(q))
+})
+function open(m: Message) { m.read = true; selected.value = { ...m }; reply.value = '' }
+function sendReply() { if (!reply.value.trim()) return; reply.value = '' }
+</script>
+<template>
+  <div class="msg-shell">
+    <div class="msg-sidebar">
+      <div class="msg-search-wrap"><input class="msg-search" type="text" v-model="searchQuery" placeholder="Search messages…" /></div>
+      <div class="msg-list">
+        <div v-for="m in filtered" :key="m.id" class="msg-item" :class="{ 'msg-item--active': selected?.id === m.id, '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>
+        <div v-if="filtered.length === 0" class="msg-empty">No messages found.</div>
+      </div>
+    </div>
+    <div class="msg-main">
+      <template v-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" v-model="reply" placeholder="Write a reply…" rows="3"></textarea>
+          <button class="oasis-btn" :disabled="!reply.trim()" @click="sendReply">Send</button>
+        </div>
+      </template>
+      <div v-else class="msg-placeholder">📬 Select a message to read it</div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.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}
+</style>

package/src/components/Mission/ManageMission.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🎯</div>
+    <h2 class="p-title">Manage Mission</h2>
+    <p class="p-body">Mission management tools are coming soon — create, edit, and track your OASIS missions with full multi-provider support.</p>
+    <button class="p-btn" @click="emit('close')">OK</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>

package/src/components/Mission/Mission.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Mission { id: string; title: string; description: string; reward: number; status: 'available' | 'active' | 'complete' }
+const missions = ref<Mission[]>([
+  { id: '1', title: 'First Contact', description: 'Log into OASIS for the first time and explore the hub.', reward: 100, status: 'complete' },
+  { id: '2', title: 'Karma Cultivator', description: 'Earn 500 karma through positive actions in the OASIS.', reward: 250, status: 'active' },
+  { id: '3', title: 'NFT Hunter', description: 'Acquire your first rare NFT from the marketplace.', reward: 400, status: 'available' },
+  { id: '4', title: 'Seed Planter', description: 'Plant 3 seeds and nurture them to full growth.', reward: 150, status: 'available' },
+])
+function statusLabel(s: string) { return s === 'available' ? 'Available' : s === 'active' ? 'In Progress' : 'Complete' }
+function accept(m: Mission) { m.status = 'active' }
+function complete(m: Mission) { m.status = 'complete' }
+</script>
+<template>
+  <div class="mis-shell">
+    <div class="mis-header"><h2 class="mis-title">🎯 Missions</h2><p class="mis-sub">Complete missions to earn karma and unlock rewards.</p></div>
+    <div class="mis-list">
+      <div v-for="m in missions" :key="m.id" class="mis-card" :class="`mis-card--${m.status}`">
+        <div class="mis-left"><div class="mis-title-text">{{ m.title }}</div><div class="mis-desc">{{ m.description }}</div></div>
+        <div class="mis-right">
+          <div class="mis-reward">+{{ m.reward }} karma</div>
+          <div class="mis-status-badge" :class="`mis-status-badge--${m.status}`">{{ statusLabel(m.status) }}</div>
+          <button v-if="m.status === 'available'" class="mis-btn" @click="accept(m)">Accept</button>
+          <button v-if="m.status === 'active'" class="mis-btn mis-btn--complete" @click="complete(m)">Complete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.mis-shell{display:flex;flex-direction:column;gap:18px}.mis-header{text-align:center}.mis-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.mis-sub{font-size:13px;color:#7a9bbf;margin:0}.mis-list{display:flex;flex-direction:column;gap:12px}.mis-card{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px}.mis-card--active{border-color:rgba(0,200,255,.35);background:rgba(0,200,255,.05)}.mis-card--complete{border-color:rgba(72,220,130,.25);background:rgba(72,220,130,.04);opacity:.7}.mis-left{flex:1}.mis-title-text{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:4px}.mis-desc{font-size:12px;color:#7a9bbf;line-height:1.5}.mis-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}.mis-reward{font-size:12px;color:#48dc82;font-weight:600;white-space:nowrap}.mis-status-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}.mis-status-badge--available{color:#7a9bbf;border-color:rgba(122,155,191,.3)}.mis-status-badge--active{color:#00c8ff;border-color:rgba(0,200,255,.35)}.mis-status-badge--complete{color:#48dc82;border-color:rgba(72,220,130,.3)}.mis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:7px 16px;cursor:pointer;white-space:nowrap}.mis-btn--complete{background:linear-gradient(135deg,#48dc82,#00aa55)}
+</style>

package/src/components/Mission/SearchMission.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; status: string }] }>()
+const form = ref({ query: '', status: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Mission</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Mission Name</label><input class="p-input" v-model="form.query" placeholder="Search missions..." /></div>
+      <div class="p-row">
+        <label class="p-label">Status</label>
+        <select class="p-input" v-model="form.status">
+          <option>All</option><option>Active</option><option>Completed</option><option>Failed</option><option>Pending</option>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Search</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:20px;padding:24px 20px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-form{display:flex;flex-direction:column;gap:14px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:14px;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}.p-input:focus{border-color:rgba(0,200,255,.5)}.p-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.p-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 24px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}.p-btn-cancel{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:10px 24px;cursor:pointer}
+</style>

package/src/components/Mission/ViewMission.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ name?: string; description?: string; status?: string; reward?: string; progress?: number }>()
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🎯</div>
+    <h2 class="p-title">{{ name ?? 'Mission Details' }}</h2>
+    <div class="p-status-badge" :class="`p-status--${(status ?? 'active').toLowerCase()}`">{{ status ?? 'Active' }}</div>
+    <p class="p-body">{{ description ?? 'Complete objectives to advance this mission and earn rewards in the OASIS.' }}</p>
+    <div class="p-reward" v-if="reward"><span class="p-reward-label">Reward</span><span class="p-reward-value">{{ reward }}</span></div>
+    <div class="p-progress-wrap" v-if="progress !== undefined">
+      <div class="p-progress-bar"><div class="p-progress-fill" :style="{ width: progress + '%' }"></div></div>
+      <span class="p-pct">{{ progress }}% complete</span>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px;text-align:center}.p-icon{font-size:48px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-status-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 12px;border:1px solid currentColor}.p-status--active{color:#00e676}.p-status--completed{color:#ffb43c}.p-status--failed{color:#ff4444}.p-status--pending{color:#7a9bbf}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-reward{background:rgba(255,180,60,.06);border:1px solid rgba(255,180,60,.2);border-radius:8px;padding:10px 16px;display:flex;gap:10px;align-items:center}.p-reward-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-reward-value{font-family:'Orbitron',sans-serif;font-size:14px;color:#ffb43c;font-weight:700}.p-progress-wrap{width:100%;max-width:300px;display:flex;flex-direction:column;gap:6px;align-items:center}.p-progress-bar{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}.p-progress-fill{height:100%;background:linear-gradient(90deg,#00c8ff,#0080ff);border-radius:999px}.p-pct{font-size:12px;color:#7a9bbf}.p-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:11px 28px;cursor:pointer;transition:opacity .2s}.p-btn:hover{opacity:.85}
+</style>