@oasisomniverse/vue 1.0.0

package/package.json

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

package/src/components/Avatar/AvatarWallet.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface WalletRow { date: string; note: string; fromAvatar: string; fromWallet: string; token: string; amount: string; balance: string; provider: string; type: string }
+const emit = defineEmits<{ close: [] }>()
+const rows: WalletRow[] = [
+  { date: '2024-01-01', note: 'Initial deposit', fromAvatar: 'System', fromWallet: 'Genesis', token: 'KARMA', amount: '+500', balance: '500', provider: 'Holochain', type: 'Credit' },
+  { date: '2024-01-15', note: 'Quest reward', fromAvatar: 'QuestMaster', fromWallet: '0xabc...', token: 'SEEDS', amount: '+100', balance: '600', provider: 'Ethereum', type: 'Credit' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">💳 Avatar Wallet</h2>
+    <div class="p-table-wrap">
+      <table class="p-table">
+        <thead>
+          <tr><th>Date</th><th>Note</th><th>From Avatar</th><th>From Wallet</th><th>Token</th><th>Amount</th><th>Balance</th><th>Provider</th><th>Type</th></tr>
+        </thead>
+        <tbody>
+          <tr v-for="(r, i) in rows" :key="i">
+            <td>{{ r.date }}</td><td>{{ r.note }}</td><td>{{ r.fromAvatar }}</td><td>{{ r.fromWallet }}</td><td>{{ r.token }}</td><td>{{ r.amount }}</td><td>{{ r.balance }}</td><td>{{ r.provider }}</td><td>{{ r.type }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </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-table-wrap{overflow-x:auto;border-radius:10px;border:1px solid rgba(0,200,255,.15)}.p-table{width:100%;border-collapse:collapse;font-size:13px}.p-table th{background:rgba(0,200,255,.08);color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:10px 12px;text-align:left;white-space:nowrap}.p-table td{color:#c8dff0;padding:9px 12px;border-top:1px solid rgba(255,255,255,.05)}.p-table tr:hover td{background:rgba(0,200,255,.04)}.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/Avatar/EditAvatar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ username: string; bio: string; avatar2d: string; avatar3d: string }] }>()
+const form = ref({ username: '', bio: '', avatar2d: '', avatar3d: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">✏️ Edit Avatar</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Username</label><input class="p-input" v-model="form.username" placeholder="Your username" /></div>
+      <div class="p-row"><label class="p-label">Bio</label><textarea class="p-textarea" v-model="form.bio" placeholder="Tell the OASIS about yourself..."></textarea></div>
+      <div class="p-row"><label class="p-label">2D Avatar URL</label><input class="p-input" v-model="form.avatar2d" placeholder="https://..." /></div>
+      <div class="p-row"><label class="p-label">3D Avatar URL</label><input class="p-input" v-model="form.avatar3d" 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">Save</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,.p-textarea{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,.p-textarea:focus{border-color:rgba(0,200,255,.5)}.p-textarea{min-height:80px;resize:vertical}.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/Avatar/SearchAvatar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; provider: string }] }>()
+const form = ref({ query: '', provider: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Avatar</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Username / ID</label><input class="p-input" v-model="form.query" placeholder="Search by username or avatar ID" /></div>
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>All</option><option>Holochain</option><option>Ethereum</option><option>Solana</option><option>IPFS</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/Avatar/ViewAvatar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ username?: string; level?: number; karma?: number; provider?: string }>()
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-avatar-icon">👤</div>
+    <h2 class="p-title">{{ username ?? 'Avatar Profile' }}</h2>
+    <div class="p-stats">
+      <div class="p-stat"><span class="p-stat-label">Level</span><span class="p-stat-value">{{ level ?? 1 }}</span></div>
+      <div class="p-stat"><span class="p-stat-label">Karma</span><span class="p-stat-value">{{ karma ?? 0 }}</span></div>
+      <div class="p-stat"><span class="p-stat-label">Provider</span><span class="p-stat-value">{{ provider ?? 'Holochain' }}</span></div>
+    </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:18px;padding:32px 20px;text-align:center}.p-avatar-icon{font-size:60px}.p-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0}.p-stats{display:flex;gap:24px}.p-stat{display:flex;flex-direction:column;gap:4px;align-items:center;background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:12px 18px}.p-stat-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-stat-value{font-family:'Orbitron',sans-serif;font-size:16px;color:#00c8ff;font-weight:700}.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/AvatarConnect/AvatarConnect.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div v-if="session" class="avatar-badge">
+      <span class="avatar-icon">⬡</span>
+      <span class="avatar-name">{{ session.username }}</span>
+      <span class="karma-pill">{{ session.karma.toLocaleString() }} ✦</span>
+      <button class="logout-btn" @click="logout">✕</button>
+    </div>
+    <button v-else class="connect-btn" @click="open = true">⬡ CONNECT AVATAR</button>
+
+    <OasisModal :open="open" accent-color="rgba(0,232,124,.25)" @close="open = false">
+      <div class="modal-icon">⬡</div>
+      <h2 class="modal-title">Connect Your Avatar</h2>
+      <p class="modal-sub">Sign in to your OASIS avatar to earn karma across Noah's Ark ARN.</p>
+      <input v-model="username" class="oasis-input" placeholder="Avatar username" />
+      <input v-model="password" class="oasis-input" type="password" placeholder="Password" />
+      <p v-if="error" class="error-msg">{{ error }}</p>
+      <button class="btn-primary" :disabled="loading" @click="doLogin">
+        {{ loading ? 'Connecting…' : 'Connect Avatar' }}
+      </button>
+    </OasisModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useOasis } from '../../../composables/useOasis'
+import OasisModal from '../OasisModal/OasisModal.vue'
+
+const { session, login, logout } = useOasis()
+const open = ref(false)
+const loading = ref(false)
+const error = ref('')
+const username = ref('')
+const password = ref('')
+
+async function doLogin() {
+  if (!username.value || !password.value) { error.value = 'Please fill in both fields.'; return }
+  loading.value = true; error.value = ''
+  try {
+    await login(username.value, password.value)
+    open.value = false; username.value = ''; password.value = ''
+  } catch {
+    error.value = 'Login failed. Please check your credentials.'
+  } finally { loading.value = false }
+}
+</script>
+
+<style scoped>
+.connect-btn { background: none; border: 1px solid rgba(0,232,124,.4); border-radius: 999px; padding: 8px 18px; color: #00e87c; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .1em; cursor: pointer; transition: background .2s; }
+.connect-btn:hover { background: rgba(0,232,124,.08); }
+.avatar-badge { display: flex; align-items: center; gap: 8px; }
+.avatar-icon { color: #00e87c; font-size: 16px; }
+.avatar-name { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #fff; letter-spacing: .06em; }
+.karma-pill { background: rgba(0,232,124,.12); border: 1px solid rgba(0,232,124,.3); border-radius: 999px; padding: 2px 10px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #00e87c; }
+.logout-btn { background: none; border: none; color: #a8bfd8; cursor: pointer; font-size: 14px; }
+.modal-icon { font-size: 40px; text-align: center; color: #00e87c; margin-bottom: 16px; }
+.modal-title { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: #fff; text-align: center; margin: 0 0 8px; }
+.modal-sub { font-size: 14px; color: #a8bfd8; text-align: center; line-height: 1.6; margin: 0 0 24px; }
+.oasis-input { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(0,232,124,.2); border-radius: 8px; padding: 11px 14px; color: #fff; font-size: 14px; outline: none; box-sizing: border-box; margin-bottom: 12px; display: block; font-family: inherit; }
+.btn-primary { width: 100%; padding: 14px; background: linear-gradient(135deg, #00e87c, #059669); border: none; border-radius: 10px; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; cursor: pointer; margin-top: 4px; }
+.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
+.error-msg { color: #f87171; font-size: 13px; text-align: center; margin-bottom: 8px; }
+</style>

package/src/components/AvatarProfile/AvatarProfile.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useOasis } from '../../../composables/useOasis'
+
+const { session } = useOasis()
+
+const fields = ref({ title: '', firstName: '', lastName: '', username: session.value?.username ?? '', email: '', address: '' })
+const dirty = ref(false)
+const saving = ref(false)
+const status = ref('')
+const statusError = ref(false)
+
+function markDirty() { dirty.value = true }
+
+async function save() {
+  saving.value = true
+  status.value = ''
+  try {
+    await new Promise(r => setTimeout(r, 600))
+    dirty.value = false
+    statusError.value = false
+    status.value = 'Changes saved.'
+    setTimeout(() => { status.value = '' }, 3000)
+  } catch (e: any) {
+    statusError.value = true
+    status.value = e?.message ?? 'Save failed.'
+  } finally {
+    saving.value = false
+  }
+}
+
+function discard() {
+  fields.value = { title: '', firstName: '', lastName: '', username: session.value?.username ?? '', email: '', address: '' }
+  dirty.value = false
+  status.value = ''
+}
+</script>
+
+<template>
+  <div class="avp-shell">
+    <div v-if="!session" class="avp-empty">Please <strong>Beam In</strong> to view your avatar.</div>
+
+    <div v-else class="avp-layout">
+      <aside class="avp-summary">
+        <div class="avp-avatar-img"><span class="avp-avatar-icon">👤</span></div>
+        <div class="avp-name">{{ session?.username }}</div>
+        <div class="avp-stats">
+          <div class="avp-stat">
+            <span class="avp-stat-icon">⚡</span>
+            <div>
+              <div class="avp-stat-value">{{ session?.karma ?? '—' }}</div>
+              <div class="avp-stat-label">Karma</div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <div class="avp-fields">
+        <div class="avp-section-label">PROFILE</div>
+        <div class="avp-field-row">
+          <label class="avp-label" for="avp-title">Title</label>
+          <input class="avp-input" id="avp-title" type="text" v-model="fields.title" placeholder="Dr, Mr, Ms…" @input="markDirty" />
+        </div>
+        <div class="avp-field-row">
+          <label class="avp-label" for="avp-first">First Name</label>
+          <input class="avp-input" id="avp-first" type="text" v-model="fields.firstName" placeholder="First name" @input="markDirty" />
+        </div>
+        <div class="avp-field-row">
+          <label class="avp-label" for="avp-last">Last Name</label>
+          <input class="avp-input" id="avp-last" type="text" v-model="fields.lastName" placeholder="Last name" @input="markDirty" />
+        </div>
+        <div class="avp-field-row">
+          <label class="avp-label" for="avp-username">Username</label>
+          <input class="avp-input" id="avp-username" type="text" v-model="fields.username" placeholder="Username" @input="markDirty" />
+        </div>
+
+        <div class="avp-section-label" style="margin-top:18px">CONTACT</div>
+        <div class="avp-field-row">
+          <label class="avp-label" for="avp-email">Email</label>
+          <input class="avp-input" id="avp-email" type="email" v-model="fields.email" placeholder="name@example.com" @input="markDirty" />
+        </div>
+        <div class="avp-field-row">
+          <label class="avp-label" for="avp-address">Address</label>
+          <input class="avp-input" id="avp-address" type="text" v-model="fields.address" placeholder="Optional" @input="markDirty" />
+        </div>
+
+        <div v-if="status" class="avp-status" :class="{ 'avp-status--error': statusError }">{{ status }}</div>
+
+        <div v-if="dirty" class="avp-actions">
+          <button class="avp-btn" @click="save" :disabled="saving">{{ saving ? 'Saving…' : 'Save Changes' }}</button>
+          <button class="avp-btn avp-btn--ghost" @click="discard">Discard</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.avp-shell { color:#fff; }
+.avp-empty { text-align:center; padding:40px; color:#7a9bbf; font-size:14px; }
+.avp-layout { display:grid; grid-template-columns:180px 1fr; gap:28px; }
+.avp-summary { display:flex; flex-direction:column; align-items:center; gap:14px; }
+.avp-avatar-img { width:88px; height:88px; border-radius:50%; background:rgba(0,200,255,.1); border:2px solid rgba(0,200,255,.3); display:flex; align-items:center; justify-content:center; }
+.avp-avatar-icon { font-size:40px; }
+.avp-name { font-family:'Orbitron',sans-serif; font-size:13px; color:#fff; text-align:center; word-break:break-all; }
+.avp-stats { display:flex; flex-direction:column; gap:8px; width:100%; }
+.avp-stat { display:flex; align-items:center; gap:8px; background:rgba(0,200,255,.06); border-radius:8px; padding:8px 10px; }
+.avp-stat-icon { font-size:16px; }
+.avp-stat-value { font-family:'Orbitron',sans-serif; font-size:14px; color:#00c8ff; }
+.avp-stat-label { font-size:11px; color:#7a9bbf; text-transform:uppercase; letter-spacing:.06em; }
+.avp-fields { display:flex; flex-direction:column; gap:12px; }
+.avp-section-label { font-size:10px; font-weight:700; letter-spacing:.12em; color:#7a9bbf; text-transform:uppercase; margin-bottom:4px; }
+.avp-field-row { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:12px; }
+.avp-label { font-size:12px; color:#7a9bbf; text-align:right; }
+.avp-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:6px; padding:8px 12px; color:#fff; font-size:13px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+.avp-input:focus { border-color:rgba(0,200,255,.5); }
+.avp-status { margin-top:4px; font-size:13px; color:#48dc82; }
+.avp-status--error { color:#ff6b6b; }
+.avp-actions { display:flex; gap:10px; margin-top:4px; }
+.avp-btn { background:linear-gradient(135deg,#00c8ff,#0080ff); border:none; border-radius:6px; color:#fff; font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; padding:9px 16px; cursor:pointer; transition:opacity .2s; }
+.avp-btn:disabled { opacity:.5; cursor:not-allowed; }
+.avp-btn--ghost { background:transparent; border:1px solid rgba(0,200,255,.3); color:#00c8ff; }
+</style>

package/src/components/ComingSoon/ComingSoon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ title?: string; message?: string }>()
+</script>
+<template>
+  <div class="cs-shell">
+    <div class="cs-icon">🚀</div>
+    <h2 class="cs-title">{{ title ?? 'Feature Coming Soon' }}</h2>
+    <p class="cs-body">{{ message ?? 'This feature is currently under development and will be available soon.' }}</p>
+    <div class="cs-badge">Coming Soon</div>
+  </div>
+</template>
+<style scoped>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0}.cs-body{font-size:14px;color:#7a9bbf;line-height:1.6;margin:0;max-width:360px}.cs-badge{background:rgba(255,180,60,.12);border:1px solid rgba(255,180,60,.28);color:#ffb43c;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 14px;text-transform:uppercase}
+</style>

package/src/components/Confirmation/Confirmation.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{ title?: string; message?: string; icon?: string; confirmLabel?: string; cancelLabel?: string }>()
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+</script>
+<template>
+  <div class="conf-shell">
+    <div class="conf-icon">{{ icon ?? '⚠️' }}</div>
+    <h2 class="conf-title">{{ title ?? 'Are you sure?' }}</h2>
+    <p class="conf-body">{{ message ?? 'This action cannot be undone.' }}</p>
+    <div class="conf-actions">
+      <button class="conf-btn conf-btn--confirm" @click="emit('confirm')">{{ confirmLabel ?? 'Confirm' }}</button>
+      <button class="conf-btn conf-btn--cancel" @click="emit('cancel')">{{ cancelLabel ?? 'Cancel' }}</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+.conf-shell{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;text-align:center}.conf-icon{font-size:44px}.conf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.conf-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.conf-actions{display:flex;gap:12px;margin-top:4px}.conf-btn{border:none;border-radius:8px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 24px;cursor:pointer;transition:opacity .2s}.conf-btn--confirm{background:linear-gradient(135deg,#ff4444,#cc0000);color:#fff}.conf-btn--cancel{background:transparent;border:1px solid rgba(0,200,255,.3);color:#00c8ff}
+</style>

package/src/components/Contact/Contact.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const firstName = ref(''), lastName = ref(''), email = ref(''), subject = ref(''), message = ref('')
+const loading = ref(false), error = ref(''), sent = ref(false)
+async function submit() {
+  if (!email.value || !message.value) { error.value = 'Please fill in your email and message.'; return }
+  loading.value = true; error.value = ''
+  try {
+    await fetch('https://formsubmit.co/ajax/davidellams@hotmail.com', {
+      method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+      body: JSON.stringify({ firstName: firstName.value, lastName: lastName.value, email: email.value, subject: subject.value, message: message.value })
+    })
+    sent.value = true
+  } catch (e: any) { error.value = e?.message ?? 'Send failed. Please try again.' }
+  finally { loading.value = false }
+}
+</script>
+<template>
+  <div class="ct-shell">
+    <div class="ct-header">
+      <h2 class="ct-title">Contact Us</h2>
+      <p class="ct-sub">Get in touch with the OASIS team.</p>
+    </div>
+    <div v-if="sent" class="oasis-auth-success">✅ Message sent! We'll be in touch soon.</div>
+    <template v-else>
+      <div v-if="error" class="oasis-auth-error">{{ error }}</div>
+      <div class="oasis-grid-2">
+        <div class="oasis-field"><label class="oasis-label">First Name</label><input class="oasis-input" type="text" v-model="firstName" placeholder="John" /></div>
+        <div class="oasis-field"><label class="oasis-label">Last Name</label><input class="oasis-input" type="text" v-model="lastName" placeholder="Doe" /></div>
+      </div>
+      <div class="oasis-field"><label class="oasis-label">Email</label><input class="oasis-input" type="email" v-model="email" placeholder="name@example.com" /></div>
+      <div class="oasis-field"><label class="oasis-label">Subject</label><input class="oasis-input" type="text" v-model="subject" placeholder="How can we help?" /></div>
+      <div class="oasis-field"><label class="oasis-label">Message</label><textarea class="oasis-input oasis-textarea" v-model="message" placeholder="Your message…" rows="4"></textarea></div>
+      <button class="oasis-btn" :disabled="loading" @click="submit">{{ loading ? 'Sending…' : 'Send Message' }}</button>
+    </template>
+  </div>
+</template>
+<style scoped>
+.ct-shell{display:flex;flex-direction:column;gap:18px}.ct-header{text-align:center}.ct-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.ct-sub{font-size:13px;color:#7a9bbf;margin:0}.oasis-auth-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}.oasis-auth-success{background:rgba(72,220,130,.12);border:1px solid rgba(72,220,130,.3);color:#48dc82;border-radius:8px;padding:10px 14px;font-size:13px}.oasis-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.oasis-field{display:flex;flex-direction:column;gap:6px}.oasis-label{font-size:12px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;box-sizing:border-box;transition:border-color .2s;font-family:inherit}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oasis-textarea{resize:vertical;min-height:100px}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;padding:12px;cursor:pointer;transition:opacity .2s}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}
+</style>

package/src/components/DataScreen/AddData.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ provider: string; json: string; file: File | null }] }>()
+const form = ref({ provider: 'Holochain', json: '', file: null as File | null })
+function onFile(e: Event) { form.value.file = (e.target as HTMLInputElement).files?.[0] ?? null }
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">📤 Add Data</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>Holochain</option><option>Ethereum</option><option>IPFS</option><option>MongoDB</option><option>Neo4j</option><option>SQLite</option>
+        </select>
+      </div>
+      <div class="p-row"><label class="p-label">JSON</label><textarea class="p-textarea" v-model="form.json" placeholder='{"key": "value"}'></textarea></div>
+      <div class="p-row"><label class="p-label">File</label><input class="p-input" type="file" @change="onFile" /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Save</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-textarea{background:rgba(255,255,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#fff;font-size:13px;font-family:monospace;padding:10px 12px;width:100%;box-sizing:border-box;outline:none;min-height:100px;resize:vertical;transition:border-color .2s}.p-textarea: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/DataScreen/CrossChainManagement.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">Cross-Chain Management</h2>
+    <p class="p-body">Cross-chain data management is coming soon to the OASIS — enabling seamless data replication across multiple blockchains and distributed storage providers.</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/DataScreen/LoadData.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ provider: string; id: string }] }>()
+const form = ref({ provider: 'Holochain', id: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">📥 Load Data</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>Holochain</option><option>Ethereum</option><option>IPFS</option><option>MongoDB</option><option>Neo4j</option><option>SQLite</option>
+        </select>
+      </div>
+      <div class="p-row"><label class="p-label">Data ID / Key</label><input class="p-input" v-model="form.id" placeholder="Enter data ID or key" /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Load</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/DataScreen/ManageData.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 Data</h2>
+    <p class="p-body">Data management tools are coming soon. You can currently access this functionality via the OASIS API from the Developer menu.</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/DataScreen/OffChainManagement.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">Off-Chain Management</h2>
+    <p class="p-body">Off-chain data management is coming soon to the OASIS — enabling storage across IPFS, MongoDB, and other off-chain providers.</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/DataScreen/SearchData.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; provider: string }] }>()
+const form = ref({ query: '', provider: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Data</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Search Query</label><input class="p-input" v-model="form.query" placeholder="Enter search terms..." /></div>
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>All</option><option>Holochain</option><option>Ethereum</option><option>IPFS</option><option>MongoDB</option><option>Neo4j</option><option>SQLite</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/Eggs/Eggs.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Egg { id: string; name: string; rarity: string; hatchProgress: number; hatched: boolean; reward: string }
+const eggs = ref<Egg[]>([
+  { id: '1', name: 'Cosmic Egg', rarity: 'Legendary', hatchProgress: 75, hatched: false, reward: '+500 Karma Companion' },
+  { id: '2', name: 'Forest Egg', rarity: 'Common', hatchProgress: 100, hatched: true, reward: 'Woodland Sprite' },
+  { id: '3', name: 'Astral Egg', rarity: 'Epic', hatchProgress: 30, hatched: false, reward: '+200 Karma Companion' },
+  { id: '4', name: 'Ocean Egg', rarity: 'Rare', hatchProgress: 55, hatched: false, reward: 'Sea Guardian' },
+])
+function incubate(e: Egg) {
+  const next = Math.min(100, e.hatchProgress + 25)
+  e.hatchProgress = next; e.hatched = next >= 100
+}
+</script>
+<template>
+  <div class="eggs-shell">
+    <div class="eggs-header">
+      <h2 class="eggs-title">🥚 Eggs</h2>
+      <p class="eggs-sub">Hatch eggs to discover rare OASIS companions and rewards.</p>
+    </div>
+    <div class="eggs-grid">
+      <div v-for="e in eggs" :key="e.id" class="egg-card" :class="{ 'egg-card--hatched': e.hatched }">
+        <div class="egg-rarity" :class="`egg-rarity--${e.rarity.toLowerCase()}`">{{ e.rarity }}</div>
+        <div class="egg-icon">{{ e.hatched ? '🐣' : '🥚' }}</div>
+        <div class="egg-name">{{ e.name }}</div>
+        <template v-if="!e.hatched">
+          <div class="egg-progress-wrap">
+            <div class="egg-progress-bar"><div class="egg-progress-fill" :style="{ width: e.hatchProgress + '%' }"></div></div>
+            <div class="egg-pct">{{ e.hatchProgress }}%</div>
+          </div>
+          <button class="egg-btn" @click="incubate(e)">Incubate</button>
+        </template>
+        <div v-else class="egg-reward">✨ {{ e.reward }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.eggs-shell{display:flex;flex-direction:column;gap:20px}.eggs-header{text-align:center}.eggs-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.eggs-sub{font-size:13px;color:#7a9bbf;margin:0}.eggs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.egg-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .2s}.egg-card:hover{border-color:rgba(0,200,255,.35)}.egg-card--hatched{border-color:rgba(255,180,60,.3);background:rgba(255,180,60,.04)}.egg-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}.egg-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}.egg-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}.egg-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}.egg-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}.egg-icon{font-size:40px}.egg-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;text-align:center}.egg-progress-wrap{width:100%;display:flex;flex-direction:column;gap:4px;align-items:center}.egg-progress-bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}.egg-progress-fill{height:100%;background:linear-gradient(90deg,#00c8ff,#0080ff);border-radius:999px;transition:width .4s}.egg-pct{font-size:11px;color:#7a9bbf}.egg-btn{width:100%;background:linear-gradient(135deg,#ffb43c,#ff8c00);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:8px;cursor:pointer;transition:opacity .2s}.egg-btn:hover{opacity:.85}.egg-reward{font-size:12px;color:#ffb43c;font-weight:600;text-align:center}
+</style>

package/src/components/Eggs/ManageEggs.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 Eggs</h2>
+    <p class="p-body">Advanced egg management is coming soon. Hatch, trade and evolve your OASIS eggs to discover rare companions and unlock rewards.</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>