@oasisomniverse/vue 1.0.0

package/src/components/NFT/ContactPopup.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>()
+const contacts = [
+  { name: 'Alice Wonderland', country: 'UK', group: 'Friends' },
+  { name: 'Bob Builder', country: 'USA', group: 'Colleagues' },
+  { name: 'Charlie Brown', country: 'Canada', group: 'Friends' },
+  { name: 'Diana Prince', country: 'Greece', group: 'Family' },
+]
+const groups = ['Friends', 'Family', 'Colleagues', 'My List 1', 'My List 2']
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">👥 Contacts</h2>
+    <div class="p-group-bar">
+      <button v-for="g in groups" :key="g" class="p-group-btn">{{ g }}</button>
+    </div>
+    <div class="p-table-wrap">
+      <table class="p-table">
+        <thead><tr><th>Name</th><th>Country</th><th>Group</th></tr></thead>
+        <tbody>
+          <tr v-for="c in contacts" :key="c.name">
+            <td>{{ c.name }}</td><td>{{ c.country }}</td><td>{{ c.group }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="p-foot-btns">
+      <button class="p-foot-btn">Find Avatar</button>
+      <button class="p-foot-btn">Create List</button>
+    </div>
+    <button class="p-btn" @click="emit('close')">Close</button>
+  </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-group-bar{display:flex;gap:8px;flex-wrap:wrap}.p-group-btn{background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:6px;color:#00c8ff;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;transition:background .2s}.p-group-btn:hover{background:rgba(0,200,255,.16)}.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}.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-foot-btns{display:flex;gap:10px;justify-content:flex-end}.p-foot-btn{background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:6px;color:#00c8ff;font-size:12px;font-weight:600;padding:7px 16px;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/NFT/ManageOasisNft.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 OASIS NFT</h2>
+    <p class="p-body">NFT management tools are coming soon — mint, transfer, burn and list your OASIS NFTs across multiple blockchain 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/NFT/NFT.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+interface NFT { id: string; name: string; rarity: string; type: string; karma: number; image: string }
+const tabs = ['All', 'Avatar', 'Land', 'Item', 'Art']
+const activeTab = ref('All')
+const nfts = ref<NFT[]>([
+  { id: '1', name: 'Cosmic Warrior', rarity: 'Legendary', type: 'Avatar', karma: 500, image: '⚔️' },
+  { id: '2', name: 'Forest Realm', rarity: 'Epic', type: 'Land', karma: 250, image: '🌲' },
+  { id: '3', name: 'Quantum Blade', rarity: 'Rare', type: 'Item', karma: 100, image: '🗡️' },
+  { id: '4', name: 'Nebula Portrait', rarity: 'Common', type: 'Art', karma: 30, image: '🎨' },
+  { id: '5', name: 'Light Keeper', rarity: 'Epic', type: 'Avatar', karma: 200, image: '🌟' },
+  { id: '6', name: 'Sky Citadel', rarity: 'Rare', type: 'Land', karma: 120, image: '🏰' },
+])
+const filtered = computed(() => activeTab.value === 'All' ? nfts.value : nfts.value.filter(n => n.type === activeTab.value))
+</script>
+<template>
+  <div class="nft-shell">
+    <div class="nft-header"><h2 class="nft-title">🖼️ NFTs</h2><p class="nft-sub">Your OASIS non-fungible token collection.</p></div>
+    <div class="nft-tabs">
+      <button v-for="t in tabs" :key="t" class="nft-tab" :class="{ 'nft-tab--active': activeTab === t }" @click="activeTab = t">{{ t }}</button>
+    </div>
+    <div class="nft-grid">
+      <div v-for="n in filtered" :key="n.id" class="nft-card">
+        <div class="nft-img">{{ n.image }}</div>
+        <div class="nft-rarity" :class="`nft-rarity--${n.rarity.toLowerCase()}`">{{ n.rarity }}</div>
+        <div class="nft-name">{{ n.name }}</div>
+        <div class="nft-type">{{ n.type }}</div>
+        <div class="nft-karma">+{{ n.karma }} karma</div>
+      </div>
+      <div v-if="filtered.length === 0" class="nft-empty">No NFTs in this category.</div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.nft-shell{display:flex;flex-direction:column;gap:18px}.nft-header{text-align:center}.nft-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.nft-sub{font-size:13px;color:#7a9bbf;margin:0}.nft-tabs{display:flex;gap:8px;flex-wrap:wrap}.nft-tab{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#7a9bbf;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:7px 16px;cursor:pointer;transition:all .2s}.nft-tab--active{background:rgba(0,200,255,.15);border-color:#00c8ff;color:#00c8ff}.nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.nft-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s}.nft-card:hover{border-color:rgba(0,200,255,.35)}.nft-img{font-size:44px}.nft-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}.nft-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}.nft-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}.nft-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}.nft-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}.nft-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;text-align:center}.nft-type{font-size:11px;color:#7a9bbf}.nft-karma{font-size:12px;color:#48dc82;font-weight:600}.nft-empty{grid-column:1/-1;text-align:center;color:#4a6a88;padding:32px;font-size:14px}
+</style>

package/src/components/NFT/PurchaseOasisNft.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ name?: string; price?: string; imageUrl?: string; provider?: string }>()
+const emit = defineEmits<{ close: []; purchase: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-nft-preview">{{ imageUrl ? '' : '🖼️' }}</div>
+    <h2 class="p-title">{{ name ?? 'OASIS NFT' }}</h2>
+    <div class="p-details">
+      <div class="p-detail"><span class="p-detail-label">Price</span><span class="p-detail-value">{{ price ?? '0.1 ETH' }}</span></div>
+      <div class="p-detail"><span class="p-detail-label">Provider</span><span class="p-detail-value">{{ provider ?? 'Ethereum' }}</span></div>
+    </div>
+    <div class="p-actions">
+      <button class="p-btn-cancel" @click="emit('close')">Cancel</button>
+      <button class="p-btn" @click="emit('purchase')">Purchase</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 20px;text-align:center}.p-nft-preview{width:120px;height:120px;background:linear-gradient(135deg,rgba(0,200,255,.1),rgba(184,127,255,.1));border:1px solid rgba(0,200,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:48px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-details{display:flex;gap:16px}.p-detail{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:12px 18px;display:flex;flex-direction:column;gap:4px}.p-detail-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-detail-value{font-family:'Orbitron',sans-serif;font-size:15px;color:#fff;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/NFT/PurchaseOasisVirtualLandNft.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{ parcelId?: string; size?: string; price?: string; coordinates?: string }>()
+const emit = defineEmits<{ close: []; purchase: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🏝️</div>
+    <h2 class="p-title">Purchase Virtual Land NFT</h2>
+    <div class="p-details">
+      <div class="p-detail"><span class="p-detail-label">Parcel ID</span><span class="p-detail-value">{{ parcelId ?? '#LAND-001' }}</span></div>
+      <div class="p-detail"><span class="p-detail-label">Size</span><span class="p-detail-value">{{ size ?? '1 km²' }}</span></div>
+      <div class="p-detail"><span class="p-detail-label">Coordinates</span><span class="p-detail-value">{{ coordinates ?? '51.5, -0.1' }}</span></div>
+      <div class="p-detail"><span class="p-detail-label">Price</span><span class="p-detail-value p-detail-value--gold">{{ price ?? '0.5 ETH' }}</span></div>
+    </div>
+    <div class="p-actions">
+      <button class="p-btn-cancel" @click="emit('close')">Cancel</button>
+      <button class="p-btn" @click="emit('purchase')">Purchase Land</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+.p-shell{display:flex;flex-direction:column;align-items:center;gap:18px;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-details{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px}.p-detail{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;text-align:center}.p-detail-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-detail-value{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;font-weight:700}.p-detail-value--gold{color:#ffb43c}.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/NFT/SearchOasisNft.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; provider: string; type: string }] }>()
+const form = ref({ query: '', provider: 'All', type: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search OASIS NFTs</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Name / ID</label><input class="p-input" v-model="form.query" placeholder="Search NFTs..." /></div>
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>All</option><option>Ethereum</option><option>Solana</option><option>Polygon</option>
+        </select>
+      </div>
+      <div class="p-row">
+        <label class="p-label">Type</label>
+        <select class="p-input" v-model="form.type">
+          <option>All</option><option>Avatar</option><option>Land</option><option>Item</option><option>Art</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/NFT/Solana.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ solana: string; provider: string; toAvatar: string; walletAddress: string; message: string }] }>()
+const form = ref({ solana: '', provider: 'Solana', toAvatar: '', walletAddress: '', message: '' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">◎ Solana Provider</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">Solana</label><input class="p-input" v-model="form.solana" placeholder="Solana address or amount" /></div>
+      <div class="p-row">
+        <label class="p-label">Provider</label>
+        <select class="p-input" v-model="form.provider">
+          <option>Solana</option><option>Ethereum</option><option>Holochain</option>
+        </select>
+      </div>
+      <div class="p-row"><label class="p-label">To Avatar</label><input class="p-input" v-model="form.toAvatar" placeholder="Recipient avatar username" /></div>
+      <div class="p-row"><label class="p-label">Or Wallet Address</label><input class="p-input" v-model="form.walletAddress" placeholder="0x... or Solana address" /></div>
+      <div class="p-row"><label class="p-label">Message</label><textarea class="p-textarea" v-model="form.message" placeholder="Optional message..."></textarea></div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Send</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/NFT/ViewOasisNft.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{ name?: string; tokenId?: string; owner?: string; provider?: string; description?: string }>()
+const emit = defineEmits<{ close: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-nft-preview">🖼️</div>
+    <h2 class="p-title">{{ name ?? 'OASIS NFT' }}</h2>
+    <div class="p-details">
+      <div class="p-detail"><span class="p-detail-label">Token ID</span><span class="p-detail-value">{{ tokenId ?? '#0001' }}</span></div>
+      <div class="p-detail"><span class="p-detail-label">Owner</span><span class="p-detail-value">{{ owner ?? 'Unknown' }}</span></div>
+      <div class="p-detail"><span class="p-detail-label">Provider</span><span class="p-detail-value">{{ provider ?? 'Ethereum' }}</span></div>
+    </div>
+    <p class="p-body">{{ description ?? 'A unique OASIS NFT existing across the decentralised web.' }}</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-nft-preview{width:100px;height:100px;background:linear-gradient(135deg,rgba(0,200,255,.1),rgba(184,127,255,.1));border:1px solid rgba(0,200,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:40px}.p-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}.p-details{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.p-detail{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;text-align:center}.p-detail-label{font-size:11px;color:#7a9bbf;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.p-detail-value{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;font-weight:700}.p-body{font-size:13px;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/NavBar/NavBar.vue

@@ -0,0 +1,71 @@
+<template>
+  <nav class="nav" :class="{ scrolled }">
+    <a class="nav-brand" href="#">
+      <span class="paw">🐾</span>
+      <span>NOAH'S <em>ARK</em></span>
+    </a>
+    <button class="nav-toggle" :class="{ open: menuOpen }" @click="menuOpen = !menuOpen" aria-label="Menu">
+      <span /><span /><span />
+    </button>
+    <ul class="nav-links" :class="{ open: menuOpen }">
+      <li v-for="link in links" :key="link.href">
+        <a :href="link.href" @click="menuOpen = false">{{ link.label }}</a>
+      </li>
+    </ul>
+    <div class="nav-right">
+      <a class="nav-cta" href="#adopt">🐾 Adopt Now</a>
+      <AvatarConnect />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import AvatarConnect from '../AvatarConnect/AvatarConnect.vue'
+
+const menuOpen = ref(false)
+const scrolled = ref(false)
+
+const links = [
+  { href: '#mission', label: 'Mission' },
+  { href: '#karma', label: 'Karma' },
+  { href: '#profiles', label: 'Profiles' },
+  { href: '#network', label: 'Network' },
+  { href: '#strays', label: 'Report a Stray' },
+  { href: '#community', label: 'Community' },
+  { href: '#volunteer', label: 'Volunteer' },
+  { href: '#features', label: 'Features' },
+  { href: '#healing', label: 'Healing' },
+  { href: '#digitalpet', label: 'Digital Pet' },
+  { href: '#franchise', label: 'Franchise' },
+]
+
+function onScroll() { scrolled.value = window.scrollY > 40 }
+onMounted(() => window.addEventListener('scroll', onScroll))
+onUnmounted(() => window.removeEventListener('scroll', onScroll))
+</script>
+
+<style scoped>
+.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; background: rgba(3,7,20,.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,232,124,.12); transition: padding .3s; }
+.nav.scrolled { padding: 12px 40px; }
+.nav-brand { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
+.nav-brand .paw { font-size: 18px; }
+.nav-brand em { color: #00e87c; font-style: normal; }
+.nav-links { display: flex; gap: 16px; list-style: none; padding: 0; }
+.nav-links a { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .07em; color: #a8bfd8; text-decoration: none; text-transform: uppercase; transition: color .2s; }
+.nav-links a:hover { color: #00e87c; }
+.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.nav-cta { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #00e87c; border: 1px solid rgba(0,232,124,.35); border-radius: 999px; padding: 8px 18px; text-decoration: none; white-space: nowrap; transition: background .2s; }
+.nav-cta:hover { background: rgba(0,232,124,.08); }
+.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; }
+.nav-toggle span { display: block; width: 100%; height: 2px; background: #a8bfd8; transition: transform .25s, opacity .25s; }
+.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.nav-toggle.open span:nth-child(2) { opacity: 0; }
+.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+@media (max-width: 1100px) {
+  .nav-toggle { display: flex; }
+  .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw,320px); flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; padding: 76px 32px 24px; overflow-y: auto; background: rgba(3,7,20,.97); backdrop-filter: blur(12px); border-left: 1px solid rgba(0,232,124,.12); transform: translateX(100%); transition: transform .3s ease; }
+  .nav-links.open { transform: translateX(0); }
+  .nav { padding: 14px 20px; }
+}
+</style>

package/src/components/OApp/CreateOAPP.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ name: string; description: string; type: string; provider: string }] }>()
+const form = ref({ name: '', description: '', type: 'Web', provider: 'Holochain' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">✨ Create OAPP</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">OAPP Name</label><input class="p-input" v-model="form.name" placeholder="My OASIS Application" /></div>
+      <div class="p-row"><label class="p-label">Description</label><textarea class="p-textarea" v-model="form.description" placeholder="What does this OAPP do?"></textarea></div>
+      <div class="p-row">
+        <label class="p-label">Type</label>
+        <select class="p-input" v-model="form.type">
+          <option>Web</option><option>Game</option><option>AR</option><option>VR</option><option>Mobile</option>
+        </select>
+      </div>
+      <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>
+        </select>
+      </div>
+      <div class="p-actions"><button class="p-btn-cancel" type="button" @click="emit('close')">Cancel</button><button class="p-btn" type="submit">Create</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/OApp/DeployOAPP.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{ name?: string; version?: string }>()
+const emit = defineEmits<{ close: []; deploy: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">🚀</div>
+    <h2 class="p-title">Deploy OAPP</h2>
+    <p class="p-body">Ready to deploy <strong>{{ name ?? 'this OAPP' }}</strong> v{{ version ?? '1.0.0' }} to the OASIS network?</p>
+    <div class="p-checklist">
+      <div class="p-check">✅ Code compiled</div>
+      <div class="p-check">✅ Tests passed</div>
+      <div class="p-check">✅ Provider configured</div>
+    </div>
+    <div class="p-actions">
+      <button class="p-btn-cancel" @click="emit('close')">Cancel</button>
+      <button class="p-btn" @click="emit('deploy')">Deploy</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-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-checklist{display:flex;flex-direction:column;gap:8px;align-self:stretch;background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px}.p-check{font-size:13px;color:#c8dff0;text-align:left}.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/OApp/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 Our World to run it locally and develop OAPPs against a local OASIS node. Includes the full OASIS API runtime and development tools.</p>
+    <div class="p-size">Estimated size: <strong>4.2 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/OApp/EditOAPP.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+defineProps<{ initialName?: string; initialDescription?: string }>()
+const emit = defineEmits<{ close: []; submit: [{ name: string; description: string; version: string }] }>()
+const form = ref({ name: '', description: '', version: '1.0.0' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">✏️ Edit OAPP</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">OAPP Name</label><input class="p-input" v-model="form.name" :placeholder="initialName ?? 'OAPP name'" /></div>
+      <div class="p-row"><label class="p-label">Description</label><textarea class="p-textarea" v-model="form.description" :placeholder="initialDescription ?? 'Description'"></textarea></div>
+      <div class="p-row"><label class="p-label">Version</label><input class="p-input" v-model="form.version" placeholder="1.0.0" /></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/OApp/InstallOAPP.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{ name?: string; version?: string; size?: string }>()
+const emit = defineEmits<{ close: []; install: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">📦</div>
+    <h2 class="p-title">Install OAPP</h2>
+    <div class="p-card">
+      <div class="p-card-row"><span class="p-card-label">Name</span><span class="p-card-value">{{ name ?? 'OAPP' }}</span></div>
+      <div class="p-card-row"><span class="p-card-label">Version</span><span class="p-card-value">{{ version ?? '1.0.0' }}</span></div>
+      <div class="p-card-row"><span class="p-card-label">Size</span><span class="p-card-value">{{ size ?? '2.3 MB' }}</span></div>
+    </div>
+    <p class="p-body">This OAPP will be installed to your OASIS avatar and made available in Our World.</p>
+    <div class="p-actions">
+      <button class="p-btn-cancel" @click="emit('close')">Cancel</button>
+      <button class="p-btn" @click="emit('install')">Install</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-card{width:100%;max-width:300px;background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:10px;overflow:hidden}.p-card-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(0,200,255,.08)}.p-card-row:last-child{border-bottom:none}.p-card-label{font-size:12px;color:#7a9bbf;font-weight:600}.p-card-value{font-size:13px;color:#fff;font-weight:600}.p-body{font-size:13px;color:#a8bfd8;line-height:1.6;margin:0;max-width:340px}.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/OApp/LaunchOAPP.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ name?: string; description?: string }>()
+const emit = defineEmits<{ close: []; launch: [] }>()
+</script>
+<template>
+  <div class="p-shell">
+    <div class="p-icon">▶️</div>
+    <h2 class="p-title">Launch OAPP</h2>
+    <p class="p-body">You are about to launch <strong>{{ name ?? 'this OAPP' }}</strong>. It will open within the OASIS Omniverse.</p>
+    <p class="p-desc" v-if="description">{{ description }}</p>
+    <div class="p-actions">
+      <button class="p-btn-cancel" @click="emit('close')">Cancel</button>
+      <button class="p-btn" @click="emit('launch')">Launch</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-body{font-size:14px;color:#a8bfd8;line-height:1.6;margin:0;max-width:360px}.p-desc{font-size:13px;color:#7a9bbf;line-height:1.5;margin:0;max-width:360px}.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/OApp/ManageOAPP.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 OAPP</h2>
+    <p class="p-body">Advanced OAPP management tools are coming soon — configure permissions, update dependencies, manage subscriptions, and monitor usage analytics.</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/OApp/OApp.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+interface OApp { id: string; name: string; description: string; category: string; icon: string; karma: number; launched: boolean }
+const search = ref('')
+const oapps = ref<OApp[]>([
+  { id: '1', name: 'OLAND', description: 'Virtual land management and terraforming in the OASIS.', category: 'Metaverse', icon: '🌍', karma: 200, launched: false },
+  { id: '2', name: 'OMARKET', description: 'Decentralised marketplace for NFTs and digital goods.', category: 'Commerce', icon: '🛒', karma: 150, launched: false },
+  { id: '3', name: 'OCHAT', description: 'Encrypted peer-to-peer messaging on the ONET.', category: 'Social', icon: '💬', karma: 80, launched: false },
+  { id: '4', name: 'OQUESTS', description: 'Daily quests and challenges for karma rewards.', category: 'Gaming', icon: '⚔️', karma: 300, launched: false },
+])
+const filtered = computed(() => {
+  const q = search.value.toLowerCase()
+  return oapps.value.filter(a => a.name.toLowerCase().includes(q) || a.description.toLowerCase().includes(q))
+})
+function toggle(a: OApp) { a.launched = !a.launched }
+</script>
+<template>
+  <div class="oapp-shell">
+    <div class="oapp-header"><h2 class="oapp-title">📱 OApps</h2><p class="oapp-sub">Decentralised apps built on the OASIS network.</p></div>
+    <input class="oasis-input" type="text" v-model="search" placeholder="Search OApps…" />
+    <div class="oapp-grid">
+      <div v-for="a in filtered" :key="a.id" class="oapp-card">
+        <div class="oapp-icon">{{ a.icon }}</div>
+        <div class="oapp-info">
+          <div class="oapp-name">{{ a.name }}</div>
+          <div class="oapp-cat">{{ a.category }}</div>
+          <div class="oapp-desc">{{ a.description }}</div>
+        </div>
+        <div class="oapp-footer">
+          <div class="oapp-karma">+{{ a.karma }} karma</div>
+          <button class="oapp-btn" :class="{ 'oapp-btn--launched': a.launched }" @click="toggle(a)">{{ a.launched ? 'Quit' : 'Launch' }}</button>
+        </div>
+      </div>
+      <div v-if="filtered.length === 0" class="oapp-empty">No OApps found.</div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.oapp-shell{display:flex;flex-direction:column;gap:18px}.oapp-header{text-align:center}.oapp-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.oapp-sub{font-size:13px;color:#7a9bbf;margin:0}.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)}.oapp-grid{display:flex;flex-direction:column;gap:12px}.oapp-card{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;transition:border-color .2s}.oapp-card:hover{border-color:rgba(0,200,255,.3)}.oapp-icon{font-size:32px;flex-shrink:0}.oapp-info{flex:1}.oapp-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:3px}.oapp-cat{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.oapp-desc{font-size:12px;color:#7a9bbf;line-height:1.5}.oapp-footer{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}.oapp-karma{font-size:11px;color:#48dc82;font-weight:600;white-space:nowrap}.oapp-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;transition:opacity .2s;white-space:nowrap}.oapp-btn--launched{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.4);color:#ff6b6b}.oapp-empty{text-align:center;color:#4a6a88;font-size:14px;padding:32px}
+</style>

package/src/components/OApp/SearchOAPP.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const emit = defineEmits<{ close: []; submit: [{ query: string; type: string; provider: string }] }>()
+const form = ref({ query: '', type: 'All', provider: 'All' })
+function handleSubmit() { emit('submit', { ...form.value }) }
+</script>
+<template>
+  <div class="p-shell">
+    <h2 class="p-title">🔍 Search OAPPs</h2>
+    <form class="p-form" @submit.prevent="handleSubmit">
+      <div class="p-row"><label class="p-label">OAPP Name</label><input class="p-input" v-model="form.query" placeholder="Search OAPPs..." /></div>
+      <div class="p-row">
+        <label class="p-label">Type</label>
+        <select class="p-input" v-model="form.type">
+          <option>All</option><option>Web</option><option>Game</option><option>AR</option><option>VR</option><option>Mobile</option>
+        </select>
+      </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>
+        </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/ONET/ONET.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const connected = ref(false)
+const stats = [
+  { label: 'Peers', value: '2,847' },
+  { label: 'Speed', value: '1.2 Gb/s' },
+  { label: 'Encrypted', value: '100%' },
+]
+const peers = [
+  { id: '1', name: 'AvatarX_7291', location: 'New York, US', ping: 14 },
+  { id: '2', name: 'StarKeeper_99', location: 'London, UK', ping: 32 },
+  { id: '3', name: 'NeonRider_404', location: 'Tokyo, JP', ping: 67 },
+]
+</script>
+<template>
+  <div class="onet-shell">
+    <div class="onet-header"><h2 class="onet-title">🌐 ONET</h2><p class="onet-sub">The OASIS decentralised internet layer.</p></div>
+    <div class="onet-status-card" :class="{ 'onet-status--active': connected }">
+      <div class="onet-status-dot" :class="{ 'onet-status-dot--active': connected }"></div>
+      <div class="onet-status-info"><div class="onet-status-label">ONET Connection</div><div class="onet-status-val">{{ connected ? 'Connected' : 'Disconnected' }}</div></div>
+      <button class="onet-btn" @click="connected = !connected">{{ connected ? 'Disconnect' : 'Connect' }}</button>
+    </div>
+    <template v-if="connected">
+      <div class="onet-stats">
+        <div v-for="s in stats" :key="s.label" class="onet-stat"><div class="onet-stat-val">{{ s.value }}</div><div class="onet-stat-label">{{ s.label }}</div></div>
+      </div>
+      <div class="onet-peers-header">Active Peers</div>
+      <div class="onet-peers">
+        <div v-for="p in peers" :key="p.id" class="onet-peer">
+          <div class="onet-peer-icon">👤</div>
+          <div class="onet-peer-info"><div class="onet-peer-name">{{ p.name }}</div><div class="onet-peer-location">{{ p.location }}</div></div>
+          <div class="onet-peer-ping">{{ p.ping }}ms</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<style scoped>
+.onet-shell{display:flex;flex-direction:column;gap:18px}.onet-header{text-align:center}.onet-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.onet-sub{font-size:13px;color:#7a9bbf;margin:0}.onet-status-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px}.onet-status--active{border-color:rgba(72,220,130,.3)}.onet-status-dot{width:12px;height:12px;border-radius:50%;background:#4a6a88;flex-shrink:0;transition:all .3s}.onet-status-dot--active{background:#48dc82;box-shadow:0 0 10px #48dc82}.onet-status-info{flex:1}.onet-status-label{font-size:12px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}.onet-status-val{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;margin-top:3px}.onet-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 18px;cursor:pointer}.onet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.onet-stat{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.onet-stat-val{font-family:'Share Tech Mono',monospace;font-size:18px;color:#00c8ff;font-weight:600}.onet-stat-label{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.onet-peers-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.onet-peers{display:flex;flex-direction:column;gap:8px}.onet-peer{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.07);border-radius:8px}.onet-peer-icon{font-size:20px}.onet-peer-info{flex:1}.onet-peer-name{font-size:13px;color:#e0f0ff}.onet-peer-location{font-size:11px;color:#4a6a88;margin-top:2px}.onet-peer-ping{font-family:'Share Tech Mono',monospace;font-size:12px;color:#48dc82}
+</style>