@oasisomniverse/vue 1.0.0

package/src/components/Quest/SearchQuest.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; status: string; difficulty: string }] }>()
+const form = ref({ query: '', status: 'All', difficulty: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search Quest</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Quest Name</label><input class="p-input" v-model="form.query" placeholder="Search quests..." /></div>
+      <div class="p-row">
+        <label class="p-label">Status</label>
+        <select class="p-input" v-model="form.status">
+          <option>All</option><option>Available</option><option>Active</option><option>Completed</option>
+        </select>
+      </div>
+      <div class="p-row">
+        <label class="p-label">Difficulty</label>
+        <select class="p-input" v-model="form.difficulty">
+          <option>All</option><option>Easy</option><option>Medium</option><option>Hard</option><option>Legendary</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/Quest/ViewQuest.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{ name?: string; description?: string; difficulty?: string; reward?: string; xp?: number }>()
+const emit = defineEmits<{ close: []; accept: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">⚔️</div>
+    <h2 class="p-title">{{ name ?? 'Quest Details' }}</h2>
+    <div class="p-diff-badge" v-if="difficulty" :class="`p-diff--${difficulty.toLowerCase()}`">{{ difficulty }}</div>
+    <p class="p-body">{{ description ?? 'Venture forth into the OASIS and complete this quest to earn rewards and karma.' }}</p>
+    <div class="p-rewards">
+      <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-reward" v-if="xp !== undefined"><span class="p-reward-label">XP</span><span class="p-reward-value">+{{ xp }}</span></div>
+    </div>
+    <div class="p-actions">
+      <button class="p-btn-cancel" @click="emit('close')">Close</button>
+      <button class="p-btn" @click="emit('accept')">Accept Quest</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:48px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-diff-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 12px;border:1px solid currentColor}.p-diff--easy{color:#00e676}.p-diff--medium{color:#ffb43c}.p-diff--hard{color:#ff7744}.p-diff--legendary{color:#b87fff}.p-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-rewards{display:flex;gap:12px}.p-reward{background:rgba(255,180,60,.06);border:1px solid rgba(255,180,60,.2);border-radius:8px;padding:10px 16px;display:flex;flex-direction:column;gap:4px;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:15px;color:#ffb43c;font-weight:700}.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/ResetPassword/ResetPassword.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OASISClient } from '@oasisomniverse/web4-api'
+
+const emit = defineEmits<{ switchTo: [view: 'login'] }>()
+const password = ref(''); const confirmPassword = ref('')
+const loading = ref(false); const error = ref(''); const done = ref(false)
+
+async function submit() {
+  if (!password.value || !confirmPassword.value) { error.value = 'Please fill in all fields.'; return }
+  if (password.value !== confirmPassword.value) { error.value = 'Passwords do not match.'; return }
+  if (password.value.length < 6) { error.value = 'Password must be at least 6 characters.'; return }
+  loading.value = true; error.value = ''
+  try {
+    const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' })
+    await (oasis.auth as any).resetPassword({ password: password.value })
+    done.value = true
+  } catch (e: any) { error.value = e?.message ?? 'Reset failed. Please try again.' }
+  finally { loading.value = false }
+}
+</script>
+<template>
+  <div class="oasis-auth-form">
+    <div class="oasis-auth-header">
+      <h2 class="oasis-auth-title">Reset Password</h2>
+      <p class="oasis-auth-sub">Enter your new password below.</p>
+    </div>
+    <div v-if="error" class="oasis-auth-error">{{ error }}</div>
+    <template v-if="!done">
+      <div class="oasis-field"><label class="oasis-label">New Password</label><input class="oasis-input" type="password" v-model="password" placeholder="min 6 characters" autocomplete="new-password" /></div>
+      <div class="oasis-field"><label class="oasis-label">Confirm Password</label><input class="oasis-input" type="password" v-model="confirmPassword" placeholder="••••••••" autocomplete="new-password" /></div>
+      <button class="oasis-btn" :disabled="loading" @click="submit">{{ loading ? 'Resetting…' : 'Reset Password' }}</button>
+    </template>
+    <div v-else class="oasis-auth-success">✅ Password reset! <a class="oasis-link" href="#" @click.prevent="emit('switchTo','login')">Beam In</a></div>
+  </div>
+</template>
+<style scoped>
+.oasis-auth-form{display:flex;flex-direction:column;gap:20px}.oasis-auth-header{text-align:center}.oasis-auth-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.oasis-auth-sub{font-size:13px;color:#7a9bbf;margin:0}.oasis-auth-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}.oasis-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-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}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oasis-link{color:#00c8ff;text-decoration:none;cursor:pointer}.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/SearchAvatars/SearchAvatars.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { OASISClient } from '@oasisomniverse/web4-api'
+interface AvatarResult { id: string; username: string; firstName: string; lastName: string; karma: number }
+const query = ref(''), loading = ref(false), error = ref(''), searched = ref(false)
+const results = ref<AvatarResult[]>([])
+async function search() {
+  if (!query.value.trim()) return
+  loading.value = true; error.value = ''; searched.value = false; results.value = []
+  try {
+    const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' })
+    const res: any = await (oasis.avatar as any).searchAvatars({ searchQuery: query.value })
+    results.value = Array.isArray(res?.result) ? res.result : []
+    searched.value = true
+  } catch (e: any) { error.value = e?.message ?? 'Search failed.' }
+  finally { loading.value = false }
+}
+</script>
+<template>
+  <div class="sa-shell">
+    <div class="sa-header">
+      <h2 class="sa-title">🔍 Search Avatars</h2>
+      <p class="sa-sub">Find other OASIS avatars by username or name.</p>
+    </div>
+    <div class="sa-search-row">
+      <input class="oasis-input" type="text" v-model="query" placeholder="Search by username…" @keydown.enter="search" />
+      <button class="oasis-btn" :disabled="loading || !query.trim()" @click="search">{{ loading ? '…' : 'Search' }}</button>
+    </div>
+    <div v-if="error" class="oasis-auth-error">{{ error }}</div>
+    <div v-if="results.length > 0" class="sa-results">
+      <div v-for="a in results" :key="a.id" class="sa-card">
+        <div class="sa-avatar-icon">👤</div>
+        <div class="sa-info"><div class="sa-username">{{ a.username }}</div><div class="sa-name">{{ a.firstName }} {{ a.lastName }}</div></div>
+        <div class="sa-karma">{{ a.karma }} karma</div>
+      </div>
+    </div>
+    <div v-else-if="searched && !loading" class="sa-empty">No avatars found for "{{ query }}".</div>
+  </div>
+</template>
+<style scoped>
+.sa-shell{display:flex;flex-direction:column;gap:18px}.sa-header{text-align:center}.sa-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.sa-sub{font-size:13px;color:#7a9bbf;margin:0}.sa-search-row{display:flex;gap:10px}.oasis-input{flex:1;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;transition:border-color .2s;font-family:inherit}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 20px;cursor:pointer;white-space:nowrap;transition:opacity .2s}.oasis-btn:disabled{opacity:.4;cursor:not-allowed}.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}.sa-results{display:flex;flex-direction:column;gap:10px}.sa-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px}.sa-avatar-icon{font-size:28px}.sa-info{flex:1}.sa-username{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}.sa-name{font-size:12px;color:#7a9bbf;margin-top:2px}.sa-karma{font-size:12px;color:#48dc82;font-weight:600;white-space:nowrap}.sa-empty{text-align:center;color:#4a6a88;font-size:14px;padding:24px}
+</style>

package/src/components/Seeds/AcceptInvite.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ group: string; username: string; inviteSecret: string }] }>()
+const form = ref({ group: 'avatar', username: '', inviteSecret: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🌱 Accept Invite to Join Seeds</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row">
+        <label class="p-label">Search by</label>
+        <div class="p-radio-group">
+          <label class="p-radio"><input type="radio" v-model="form.group" value="avatar" /> Avatar</label>
+          <label class="p-radio"><input type="radio" v-model="form.group" value="seedUsername" /> Seed Username</label>
+        </div>
+      </div>
+      <div class="p-row"><label class="p-label">{{ form.group === 'avatar' ? 'Avatar Username' : 'Seed Username' }}</label><input class="p-input" v-model="form.username" placeholder="username" /></div>
+      <div class="p-row"><label class="p-label">Invite Secret</label><input class="p-input" v-model="form.inviteSecret" placeholder="Your invite secret code" /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Accept Invitation</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-radio-group{display:flex;gap:20px}.p-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:#c8dff0;cursor:pointer}.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/Seeds/DonateSeeds.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ group: string; avatar: string; seedUser: string; amount: string; note: string }] }>()
+const form = ref({ group: 'avatar', avatar: '', seedUser: '', amount: '', note: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🌱 Donate Seeds</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row">
+        <label class="p-label p-radio-label">
+          <input type="radio" v-model="form.group" value="avatar" />
+          Avatar
+        </label>
+        <input class="p-input" v-model="form.avatar" placeholder="Avatar username" :disabled="form.group !== 'avatar'" />
+      </div>
+      <div class="p-or">OR</div>
+      <div class="p-row">
+        <label class="p-label p-radio-label">
+          <input type="radio" v-model="form.group" value="seedUser" />
+          Seed Username
+        </label>
+        <input class="p-input" v-model="form.seedUser" placeholder="Seed username" :disabled="form.group !== 'seedUser'" />
+      </div>
+      <div class="p-row"><label class="p-label">Amount</label><input class="p-input" v-model="form.amount" type="number" placeholder="Amount of SEEDS" /></div>
+      <div class="p-row"><label class="p-label">Note</label><input class="p-input" v-model="form.note" placeholder="Optional note" /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Donate</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:16px;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:12px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-radio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#c8dff0;cursor:pointer}.p-or{text-align:center;font-family:'Orbitron',sans-serif;font-size:11px;color:#5a7a9a;letter-spacing:.1em}.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-input:disabled{opacity:.4;cursor:not-allowed}.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/Seeds/ManageSeeds.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 Seeds</h2>
+    <p class="p-body">SEEDS management tools are coming soon — view your balance, transaction history, trusted connections and regenerative impact score all in one place.</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/Seeds/PayWithSeeds.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ group: string; avatar: string; seedUser: string; amount: number; note: string }] }>()
+const form = ref({ group: 'avatar', avatar: '', seedUser: '', amount: 0, note: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">💸 Pay with Seeds</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row">
+        <label class="p-label p-radio-label">
+          <input type="radio" v-model="form.group" value="avatar" />
+          Avatar
+        </label>
+        <input class="p-input" v-model="form.avatar" placeholder="Avatar username" :disabled="form.group !== 'avatar'" />
+      </div>
+      <div class="p-or">OR</div>
+      <div class="p-row">
+        <label class="p-label p-radio-label">
+          <input type="radio" v-model="form.group" value="seedUser" />
+          Seed Username
+        </label>
+        <input class="p-input" v-model="form.seedUser" placeholder="Seed Username" :disabled="form.group !== 'seedUser'" />
+      </div>
+      <div class="p-row"><label class="p-label">Amount</label><input class="p-input" v-model.number="form.amount" type="number" placeholder="Amount" :disabled="form.group !== 'seedUser'" /></div>
+      <div class="p-row"><label class="p-label">Note</label><input class="p-input" v-model="form.note" placeholder="Note" /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Pay</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:16px;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:12px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-radio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#c8dff0;cursor:pointer}.p-or{text-align:center;font-family:'Orbitron',sans-serif;font-size:11px;color:#5a7a9a;letter-spacing:.1em}.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-input:disabled{opacity:.4;cursor:not-allowed}.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/Seeds/RewardSeeds.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ avatar: string; amount: number; reason: string }] }>()
+const form = ref({ avatar: '', amount: 0, reason: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🏆 Reward Seeds</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Avatar to Reward</label><input class="p-input" v-model="form.avatar" placeholder="Avatar username" /></div>
+      <div class="p-row"><label class="p-label">Amount of SEEDS</label><input class="p-input" v-model.number="form.amount" type="number" placeholder="0" /></div>
+      <div class="p-row"><label class="p-label">Reason</label><textarea class="p-textarea" v-model="form.reason" placeholder="Why are you rewarding this avatar?"></textarea></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Reward</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/Seeds/SearchSeeds.vue

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+interface Seed { id: string; name: string; type: string; rarity: string; karma: number; planted: boolean }
+const seeds = ref<Seed[]>([
+  { id: '1', name: 'Wisdom Seed', type: 'Spiritual', rarity: 'Rare', karma: 50, planted: false },
+  { id: '2', name: 'Healing Seed', type: 'Health', rarity: 'Common', karma: 20, planted: false },
+  { id: '3', name: 'Unity Seed', type: 'Community', rarity: 'Epic', karma: 150, planted: false },
+  { id: '4', name: 'Truth Seed', type: 'Knowledge', rarity: 'Legendary', karma: 500, planted: false },
+  { id: '5', name: 'Love Seed', type: 'Spiritual', rarity: 'Common', karma: 30, planted: false },
+  { id: '6', name: 'Peace Seed', type: 'Community', rarity: 'Rare', karma: 75, planted: false },
+])
+const icons: Record<string, string> = { Spiritual: '✨', Health: '💚', Community: '🤝', Knowledge: '📖' }
+function seedIcon(type: string) { return icons[type] ?? '🌱' }
+function plant(s: Seed) { s.planted = true }
+</script>
+<template>
+  <div class="seeds-shell">
+    <div class="seeds-header">
+      <h2 class="seeds-title">🌱 Seeds</h2>
+      <p class="seeds-sub">Plant seeds to grow your OASIS avatar and earn karma.</p>
+    </div>
+    <div class="seeds-grid">
+      <div v-for="s in seeds" :key="s.id" class="seed-card" :class="{ 'seed-card--planted': s.planted }">
+        <div class="seed-rarity" :class="`seed-rarity--${s.rarity.toLowerCase()}`">{{ s.rarity }}</div>
+        <div class="seed-icon">{{ seedIcon(s.type) }}</div>
+        <div class="seed-name">{{ s.name }}</div>
+        <div class="seed-type">{{ s.type }}</div>
+        <div class="seed-karma">+{{ s.karma }} Karma</div>
+        <button v-if="!s.planted" class="seed-btn" @click="plant(s)">Plant Seed</button>
+        <div v-else class="seed-planted-label">🌿 Growing…</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.seeds-shell{display:flex;flex-direction:column;gap:20px}.seeds-header{text-align:center}.seeds-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.seeds-sub{font-size:13px;color:#7a9bbf;margin:0}.seeds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.seed-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}.seed-card:hover{border-color:rgba(0,200,255,.35)}.seed-card--planted{border-color:rgba(72,220,130,.3);background:rgba(72,220,130,.04)}.seed-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}.seed-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}.seed-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}.seed-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}.seed-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}.seed-icon{font-size:36px}.seed-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;text-align:center}.seed-type{font-size:11px;color:#7a9bbf}.seed-karma{font-size:12px;color:#48dc82;font-weight:600}.seed-btn{width:100%;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:8px;cursor:pointer;transition:opacity .2s}.seed-btn:hover{opacity:.85}.seed-planted-label{font-size:12px;color:#48dc82;font-weight:600}
+</style>

package/src/components/Seeds/SendInvite.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ group: string; avatar: string; seedUser: string; amount: string; note: string }] }>()
+const form = ref({ group: 'avatar', avatar: '', seedUser: '', amount: '', note: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">✉️ Send Seeds Invite</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row">
+        <label class="p-label p-radio-label">
+          <input type="radio" v-model="form.group" value="avatar" />
+          Avatar
+        </label>
+        <input class="p-input" v-model="form.avatar" placeholder="Avatar username" :disabled="form.group !== 'avatar'" />
+      </div>
+      <div class="p-or">OR</div>
+      <div class="p-row">
+        <label class="p-label p-radio-label">
+          <input type="radio" v-model="form.group" value="seedUser" />
+          Seed Username
+        </label>
+        <input class="p-input" v-model="form.seedUser" placeholder="Seed Username" :disabled="form.group !== 'seedUser'" />
+      </div>
+      <div class="p-row"><label class="p-label">Amount</label><input class="p-input" v-model="form.amount" type="number" placeholder="Amount" :disabled="form.group !== 'seedUser'" /></div>
+      <div class="p-row"><label class="p-label">Note</label><input class="p-input" v-model="form.note" placeholder="Optional message" /></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Send Invite</button></div>
+    </form>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;gap:16px;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:12px}.p-row{display:flex;flex-direction:column;gap:6px}.p-label{font-size:12px;color:#7a9bbf;font-weight:600;letter-spacing:.05em}.p-radio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#c8dff0;cursor:pointer}.p-or{text-align:center;font-family:'Orbitron',sans-serif;font-size:11px;color:#5a7a9a;letter-spacing:.1em}.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-input:disabled{opacity:.4;cursor:not-allowed}.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/Seeds/ViewOrganizations.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const orgs = [
+  { name: 'SEEDS Foundation', members: 12400, type: 'Foundation', status: 'Active' },
+  { name: 'OASIS Collective', members: 3200, type: 'Collective', status: 'Active' },
+  { name: 'Our World Community', members: 8900, type: 'Community', status: 'Active' },
+  { name: 'Earth Regenerators', members: 5600, type: 'Movement', status: 'Growing' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🌿 SEEDS Organizations</h2>
+    <div class="p-list">
+      <div v-for="o in orgs" :key="o.name" class="p-item">
+        <div class="p-item-info">
+          <span class="p-item-name">{{ o.name }}</span>
+          <span class="p-item-desc">{{ o.type }} · {{ o.members.toLocaleString() }} members</span>
+        </div>
+        <span class="p-status" :class="`p-status--${o.status.toLowerCase()}`">{{ o.status }}</span>
+      </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:8px}.p-item{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:12px 14px}.p-item-info{display:flex;flex-direction:column;gap:3px}.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-status{font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:3px 10px;border:1px solid currentColor;text-transform:uppercase}.p-status--active{color:#00e676}.p-status--growing{color:#ffb43c}.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/Seeds/ViewSeeds.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{ balance?: number; username?: string; impact?: string }>()
+const emit = defineEmits<{ close: [] }>()
+const transactions = [
+  { date: '2024-01-10', description: 'Quest reward', amount: '+50' },
+  { date: '2024-01-08', description: 'Donation to Earth Regen', amount: '-20' },
+  { date: '2024-01-05', description: 'Welcome seeds', amount: '+100' },
+]
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🌱</div>
+    <h2 class="p-title">{{ username ?? 'My' }} Seeds</h2>
+    <div class="p-balance">
+      <span class="p-balance-label">Balance</span>
+      <span class="p-balance-value">{{ (balance ?? 0).toLocaleString() }} SEEDS</span>
+    </div>
+    <div class="p-table-wrap">
+      <table class="p-table">
+        <thead><tr><th>Date</th><th>Description</th><th>Amount</th></tr></thead>
+        <tbody>
+          <tr v-for="(t, i) in transactions" :key="i">
+            <td>{{ t.date }}</td><td>{{ t.description }}</td>
+            <td :class="t.amount.startsWith('+') ? 'pos' : 'neg'">{{ t.amount }}</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;align-items:center;text-align:center}.p-icon{font-size:44px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-balance{background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.2);border-radius:10px;padding:14px 24px;display:flex;flex-direction:column;gap:6px}.p-balance-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.p-balance-value{font-family:'Orbitron',sans-serif;font-size:24px;color:#00e676;font-weight:700}.p-table-wrap{width:100%;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}.p-table td{color:#c8dff0;padding:9px 12px;border-top:1px solid rgba(255,255,255,.05)}.pos{color:#00e676;font-weight:700}.neg{color:#ff4444;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/Settings/Settings.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const openSection = ref('')
+const saved = ref(false)
+const prefs = ref<Record<string, any>>({ notifications: true, darkMode: true, sound: false, autoSave: true, language: 'English', theme: 'Dark Space', currency: 'ETH' })
+const sections = [
+  { icon: '🔔', label: 'Notifications', options: [
+    { key: 'notifications', name: 'Enable Notifications', desc: 'Receive alerts for karma, messages and quests.', type: 'toggle' },
+    { key: 'sound', name: 'Sound Effects', desc: 'Play sounds for OASIS events.', type: 'toggle' },
+  ]},
+  { icon: '🎨', label: 'Appearance', options: [
+    { key: 'darkMode', name: 'Dark Mode', desc: 'Use the dark space theme.', type: 'toggle' },
+    { key: 'theme', name: 'Theme', desc: 'Select your OASIS visual theme.', type: 'select', choices: ['Dark Space', 'Neon City', 'Forest Realm'] },
+  ]},
+  { icon: '🌐', label: 'Language & Region', options: [
+    { key: 'language', name: 'Language', desc: 'Select your preferred language.', type: 'select', choices: ['English', 'Spanish', 'French', 'German', 'Japanese'] },
+    { key: 'currency', name: 'Display Currency', desc: 'Currency for prices and values.', type: 'select', choices: ['ETH', 'SOL', 'USD', 'GBP', 'EUR'] },
+  ]},
+  { icon: '💾', label: 'Data', options: [
+    { key: 'autoSave', name: 'Auto-save Progress', desc: 'Automatically save your OASIS progress.', type: 'toggle' },
+  ]},
+]
+function toggle(sec: string) { openSection.value = openSection.value === sec ? '' : sec }
+function save() { saved.value = true; setTimeout(() => saved.value = false, 2000) }
+</script>
+<template>
+  <div class="sett-shell">
+    <div class="sett-header"><h2 class="sett-title">⚙️ Settings</h2><p class="sett-sub">Manage your OASIS account and preferences.</p></div>
+    <div class="sett-sections">
+      <div v-for="sec in sections" :key="sec.label" class="sett-section" :class="{ 'sett-section--open': openSection === sec.label }" @click="toggle(sec.label)">
+        <div class="sett-section-header">
+          <span class="sett-section-icon">{{ sec.icon }}</span>
+          <span class="sett-section-label">{{ sec.label }}</span>
+          <span class="sett-chevron">{{ openSection === sec.label ? '▲' : '▼' }}</span>
+        </div>
+        <div v-if="openSection === sec.label" class="sett-section-body" @click.stop>
+          <div v-for="opt in sec.options" :key="opt.key" class="sett-opt">
+            <div class="sett-opt-info"><div class="sett-opt-name">{{ opt.name }}</div><div class="sett-opt-desc">{{ opt.desc }}</div></div>
+            <div v-if="opt.type === 'toggle'" class="sett-toggle" :class="{ 'sett-toggle--on': prefs[opt.key] }" @click="prefs[opt.key] = !prefs[opt.key]"><div class="sett-toggle-knob"></div></div>
+            <select v-if="opt.type === 'select'" class="sett-select" v-model="prefs[opt.key]">
+              <option v-for="c in opt.choices" :key="c" :value="c">{{ c }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button class="oasis-btn" @click="save">{{ saved ? '✅ Saved!' : 'Save Settings' }}</button>
+  </div>
+</template>
+<style scoped>
+.sett-shell{display:flex;flex-direction:column;gap:18px}.sett-header{text-align:center}.sett-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.sett-sub{font-size:13px;color:#7a9bbf;margin:0}.sett-sections{display:flex;flex-direction:column;gap:8px}.sett-section{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;overflow:hidden;transition:border-color .2s}.sett-section--open{border-color:rgba(0,200,255,.3)}.sett-section-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}.sett-section-icon{font-size:18px}.sett-section-label{flex:1;font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}.sett-chevron{font-size:10px;color:#7a9bbf}.sett-section-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}.sett-opt{display:flex;align-items:center;gap:14px}.sett-opt-info{flex:1}.sett-opt-name{font-size:13px;color:#e0f0ff}.sett-opt-desc{font-size:11px;color:#4a6a88;margin-top:2px}.sett-toggle{width:44px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);cursor:pointer;transition:background .2s;position:relative;flex-shrink:0}.sett-toggle--on{background:linear-gradient(135deg,#00c8ff,#0080ff)}.sett-toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}.sett-toggle--on .sett-toggle-knob{transform:translateX(20px)}.sett-select{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:7px;color:#fff;font-size:12px;padding:6px 10px;outline:none}.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}
+</style>