@oasisomniverse/svelte 1.0.0

package/src/components/Quest.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  interface Quest { id: string; title: string; description: string; reward: number; difficulty: string; accepted: boolean; completed: boolean }
+  let quests: Quest[] = [
+    { id: '1', title: 'Avatar Awakening', description: 'Complete your avatar profile and connect your first provider.', reward: 200, difficulty: 'Easy', accepted: true, completed: true },
+    { id: '2', title: 'Karma Seeker', description: 'Earn 1000 karma through good deeds and OASIS contributions.', reward: 500, difficulty: 'Medium', accepted: true, completed: false },
+    { id: '3', title: 'The NFT Collector', description: 'Acquire 5 unique NFTs across different categories.', reward: 1000, difficulty: 'Hard', accepted: false, completed: false },
+    { id: '4', title: 'Omniverse Explorer', description: 'Visit every major hub location on the OASIS map.', reward: 2500, difficulty: 'Legendary', accepted: false, completed: false },
+  ]
+  function accept(q: Quest) { q.accepted = true; quests = [...quests] }
+  function complete(q: Quest) { q.completed = true; quests = [...quests] }
+</script>
+<div class="qst-shell">
+  <div class="qst-header"><h2 class="qst-title">⚔️ Quests</h2><p class="qst-sub">Embark on quests to gain karma and rare rewards.</p></div>
+  <div class="qst-list">
+    {#each quests as q (q.id)}
+      <div class="qst-card" class:qst-card--active={q.accepted && !q.completed} class:qst-card--done={q.completed}>
+        <div class="qst-diff qst-diff--{q.difficulty.toLowerCase()}">{q.difficulty}</div>
+        <div class="qst-body">
+          <div class="qst-title-text">{q.title}</div>
+          <div class="qst-desc">{q.description}</div>
+          <div class="qst-reward">+{q.reward} karma</div>
+        </div>
+        <div class="qst-actions">
+          {#if q.completed}<div class="qst-done">✅ Done</div>
+          {:else if !q.accepted}<button class="qst-btn" on:click={() => accept(q)}>Accept Quest</button>
+          {:else}<button class="qst-btn qst-btn--finish" on:click={() => complete(q)}>Finish</button>{/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+<style>
+.qst-shell{display:flex;flex-direction:column;gap:18px}.qst-header{text-align:center}.qst-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.qst-sub{font-size:13px;color:#7a9bbf;margin:0}.qst-list{display:flex;flex-direction:column;gap:12px}.qst-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;transition:border-color .2s}.qst-card--active{border-color:rgba(0,200,255,.4)}.qst-card--done{opacity:.6;border-color:rgba(72,220,130,.2)}.qst-diff{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 10px;border:1px solid currentColor;white-space:nowrap;flex-shrink:0}.qst-diff--easy{color:#48dc82;border-color:rgba(72,220,130,.3)}.qst-diff--medium{color:#ffb43c;border-color:rgba(255,180,60,.3)}.qst-diff--hard{color:#ff6b6b;border-color:rgba(255,107,107,.3)}.qst-diff--legendary{color:#b87fff;border-color:rgba(184,127,255,.3)}.qst-body{flex:1}.qst-title-text{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:4px}.qst-desc{font-size:12px;color:#7a9bbf;line-height:1.5;margin-bottom:6px}.qst-reward{font-size:12px;color:#48dc82;font-weight:600}.qst-actions{flex-shrink:0}.qst-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:8px 16px;cursor:pointer;white-space:nowrap}.qst-btn--finish{background:linear-gradient(135deg,#48dc82,#00aa55)}.qst-done{font-size:13px;color:#48dc82;font-weight:600}
+</style>

package/src/components/ResetPassword.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { OASISClient } from '@oasisomniverse/web4-api'
+  const dispatch = createEventDispatcher<{ switchTo: 'login' }>()
+  let password = '', confirmPassword = '', loading = false, error = '', done = false
+  async function submit() {
+    if (!password || !confirmPassword) { error = 'Please fill in all fields.'; return }
+    if (password !== confirmPassword) { error = 'Passwords do not match.'; return }
+    if (password.length < 6) { error = 'Password must be at least 6 characters.'; return }
+    loading = true; error = ''
+    try { const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' }); await (oasis.auth as any).resetPassword({ password }); done = true }
+    catch (e: any) { error = e?.message ?? 'Reset failed. Please try again.' } finally { loading = false }
+  }
+</script>
+<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>
+  {#if error}<div class="oasis-auth-error">{error}</div>{/if}
+  {#if !done}
+    <div class="oasis-field"><label class="oasis-label">New Password</label><input class="oasis-input" type="password" bind:value={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" bind:value={confirmPassword} placeholder="••••••••" autocomplete="new-password" /></div>
+    <button class="oasis-btn" disabled={loading} on:click={submit}>{loading ? 'Resetting…' : 'Reset Password'}</button>
+  {:else}
+    <div class="oasis-auth-success">✅ Password reset! <a class="oasis-link" href="#" on:click|preventDefault={() => dispatch('switchTo', 'login')}>Beam In</a></div>
+  {/if}
+</div>
+<style>
+.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.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { OASISClient } from '@oasisomniverse/web4-api'
+  interface AvatarResult { id: string; username: string; firstName: string; lastName: string; karma: number }
+  let query = '', loading = false, error = '', searched = false
+  let results: AvatarResult[] = []
+  async function search() {
+    if (!query.trim()) return
+    loading = true; error = ''; searched = false; results = []
+    try {
+      const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' })
+      const res: any = await (oasis.avatar as any).searchAvatars({ searchQuery: query })
+      results = Array.isArray(res?.result) ? res.result : []
+      searched = true
+    } catch (e: any) { error = e?.message ?? 'Search failed.' }
+    finally { loading = false }
+  }
+</script>
+<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" bind:value={query} placeholder="Search by username…" on:keydown={(e) => e.key === 'Enter' && search()} />
+    <button class="oasis-btn" disabled={loading || !query.trim()} on:click={search}>{loading ? '…' : 'Search'}</button>
+  </div>
+  {#if error}<div class="oasis-auth-error">{error}</div>{/if}
+  {#if results.length > 0}
+    <div class="sa-results">
+      {#each results as a (a.id)}
+        <div 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>
+      {/each}
+    </div>
+  {:else if searched && !loading}
+    <div class="sa-empty">No avatars found for "{query}".</div>
+  {/if}
+</div>
+<style>
+.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.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  interface Seed { id: string; name: string; type: string; rarity: string; karma: number; planted: boolean }
+  let seeds: 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; seeds = [...seeds] }
+</script>
+<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">
+    {#each seeds as s (s.id)}
+      <div class="seed-card" class:seed-card--planted={s.planted}>
+        <div class="seed-rarity 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>
+        {#if !s.planted}
+          <button class="seed-btn" on:click={() => plant(s)}>Plant Seed</button>
+        {:else}
+          <div class="seed-planted-label">🌿 Growing…</div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+<style>
+.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/Settings.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  let openSection = '', saved = false
+  let prefs: 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: 'Currency', desc: 'Display currency for prices.', 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 toggleSection(label: string) { openSection = openSection === label ? '' : label }
+  function togglePref(key: string) { prefs[key] = !prefs[key]; prefs = { ...prefs } }
+  function save() { saved = true; setTimeout(() => saved = false, 2000) }
+</script>
+<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">
+    {#each sections as sec}
+      <div class="sett-section" class:sett-section--open={openSection === sec.label}>
+        <div class="sett-section-header" on:click={() => toggleSection(sec.label)}>
+          <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>
+        {#if openSection === sec.label}
+          <div class="sett-section-body">
+            {#each sec.options as opt}
+              <div 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>
+                {#if opt.type === 'toggle'}
+                  <div class="sett-toggle" class:sett-toggle--on={prefs[opt.key]} on:click={() => togglePref(opt.key)}><div class="sett-toggle-knob"></div></div>
+                {/if}
+                {#if opt.type === 'select'}
+                  <select class="sett-select" bind:value={prefs[opt.key]}>
+                    {#each opt.choices as c}<option value={c}>{c}</option>{/each}
+                  </select>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  <button class="oasis-btn" on:click={save}>{saved ? '✅ Saved!' : 'Save Settings'}</button>
+</div>
+<style>
+.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>

package/src/components/Signup.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { register } from './oasisStore'
+
+  const dispatch = createEventDispatcher<{ switchTo: 'login' }>()
+
+  let firstName = '', lastName = '', username = '', email = ''
+  let password = '', confirmPassword = ''
+  let acceptTerms = false
+  let loading = false
+  let error = ''
+  let success = false
+
+  async function submit() {
+    if (!firstName || !lastName || !username || !email || !password) {
+      error = 'Please fill in all fields.'; return
+    }
+    if (password !== confirmPassword) { error = 'Passwords do not match.'; return }
+    if (password.length < 6) { error = 'Password must be at least 6 characters.'; return }
+    if (!acceptTerms) { error = 'Please accept the Terms of Service.'; return }
+    loading = true
+    error = ''
+    try {
+      await register(firstName, lastName, username, email, password)
+      success = true
+    } catch (e: any) {
+      error = e?.message ?? 'Registration failed. Please try again.'
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<div class="oasis-auth-form">
+  <div class="oasis-auth-header">
+    <h2 class="oasis-auth-title">Sign Up</h2>
+    <p class="oasis-auth-sub">
+      Already have an account?
+      <a class="oasis-link" href="#" on:click|preventDefault={() => dispatch('switchTo', 'login')}>Beam In</a>
+    </p>
+  </div>
+
+  {#if error}
+    <div class="oasis-auth-error">{error}</div>
+  {/if}
+
+  {#if !success}
+    <div class="oasis-grid-2">
+      <div class="oasis-field">
+        <label class="oasis-label" for="su-first">First Name</label>
+        <input class="oasis-input" id="su-first" type="text" bind:value={firstName} placeholder="John" />
+      </div>
+      <div class="oasis-field">
+        <label class="oasis-label" for="su-last">Last Name</label>
+        <input class="oasis-input" id="su-last" type="text" bind:value={lastName} placeholder="Doe" />
+      </div>
+    </div>
+
+    <div class="oasis-grid-2">
+      <div class="oasis-field">
+        <label class="oasis-label" for="su-username">Username</label>
+        <input class="oasis-input" id="su-username" type="text" bind:value={username} placeholder="johndoe" autocomplete="username" />
+      </div>
+      <div class="oasis-field">
+        <label class="oasis-label" for="su-email">Email</label>
+        <input class="oasis-input" id="su-email" type="email" bind:value={email} placeholder="name@example.com" autocomplete="email" />
+      </div>
+    </div>
+
+    <div class="oasis-grid-2">
+      <div class="oasis-field">
+        <label class="oasis-label" for="su-pwd">Password</label>
+        <input class="oasis-input" id="su-pwd" type="password" bind:value={password} placeholder="min 6 characters" autocomplete="new-password" />
+      </div>
+      <div class="oasis-field">
+        <label class="oasis-label" for="su-cpwd">Confirm Password</label>
+        <input class="oasis-input" id="su-cpwd" type="password" bind:value={confirmPassword} placeholder="••••••••" autocomplete="new-password" />
+      </div>
+    </div>
+
+    <div class="oasis-field oasis-field--row">
+      <input class="oasis-checkbox" id="su-terms" type="checkbox" bind:checked={acceptTerms} />
+      <label class="oasis-label oasis-label--inline" for="su-terms">I accept the Terms of Service</label>
+    </div>
+
+    <button class="oasis-btn" type="button" disabled={loading} on:click={submit}>
+      {loading ? 'Creating account…' : 'Create Account'}
+    </button>
+  {:else}
+    <div class="oasis-auth-success">
+      ✅ Account created!
+      <a class="oasis-link" href="#" on:click|preventDefault={() => dispatch('switchTo', 'login')}>Beam In</a>
+    </div>
+  {/if}
+</div>
+
+<style>
+.oasis-auth-form { display:flex; flex-direction:column; gap:18px; }
+.oasis-auth-header { text-align:center; }
+.oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:22px; 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-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
+.oasis-field { display:flex; flex-direction:column; gap:6px; }
+.oasis-field--row { flex-direction:row; align-items:center; gap:10px; }
+.oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+.oasis-label--inline { text-transform:none; font-size:13px; color:#a8bfd8; }
+.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-checkbox { width:16px; height:16px; accent-color:#00c8ff; cursor:pointer; flex-shrink:0; }
+.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/StarField.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  let canvas: HTMLCanvasElement
+  let animId = 0
+
+  onMount(() => {
+    const ctx = canvas.getContext('2d')!
+    const stars = Array.from({ length: 160 }, () => ({
+      x: Math.random(), y: Math.random(),
+      r: Math.random() * 1.2 + 0.2,
+      o: Math.random(),
+      s: (Math.random() - 0.5) * 0.002,
+    }))
+
+    const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight }
+    resize()
+    window.addEventListener('resize', resize)
+
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      for (const s of stars) {
+        s.o += s.s
+        if (s.o < 0.1 || s.o > 1) s.s = -s.s
+        ctx.beginPath()
+        ctx.arc(s.x * canvas.width, s.y * canvas.height, s.r, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(200,220,255,${s.o.toFixed(2)})`
+        ctx.fill()
+      }
+      animId = requestAnimationFrame(draw)
+    }
+    draw()
+
+    return () => {
+      cancelAnimationFrame(animId)
+      window.removeEventListener('resize', resize)
+    }
+  })
+</script>
+
+<canvas bind:this={canvas} class="star-canvas" />
+
+<style>
+  .star-canvas {
+    position: fixed; inset: 0; z-index: 0;
+    pointer-events: none; width: 100%; height: 100%;
+  }
+</style>

package/src/components/VerifyEmail.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { OASISClient } from '@oasisomniverse/web4-api'
+  let loading = false, error = '', sent = false
+  async function resend() {
+    loading = true; error = ''; sent = false
+    try { const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' }); await (oasis.auth as any).resendVerificationEmail(); sent = true }
+    catch (e: any) { error = e?.message ?? 'Failed to resend.' } finally { loading = false }
+  }
+</script>
+<div class="oasis-auth-form">
+  <div class="oasis-auth-header"><div style="font-size:48px;margin-bottom:12px">📧</div><h2 class="oasis-auth-title">Verify Your Email</h2><p class="oasis-auth-sub">Check your inbox and click the link to activate your account.</p></div>
+  {#if error}<div class="oasis-auth-error">{error}</div>{/if}
+  {#if sent}<div class="oasis-auth-success">✅ Verification email resent!</div>{/if}
+  <button class="oasis-btn oasis-btn--ghost" disabled={loading} on:click={resend}>{loading ? 'Sending…' : 'Resend Verification Email'}</button>
+</div>
+<style>
+.oasis-auth-form{display:flex;flex-direction:column;gap:20px;text-align:center}.oasis-auth-header{display:flex;flex-direction:column;align-items:center}.oasis-auth-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 8px}.oasis-auth-sub{font-size:13px;color:#7a9bbf;margin:0;line-height:1.6}.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-btn{border:none;border-radius:8px;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;padding:12px;cursor:pointer;transition:opacity .2s}.oasis-btn--ghost{background:transparent;border:1px solid rgba(0,200,255,.3);color:#00c8ff}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}
+</style>

package/src/components/Wallet.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  const balances = [
+    { icon: '⟠', currency: 'Ethereum', network: 'Mainnet', amount: '0.4821', symbol: 'ETH' },
+    { icon: '◎', currency: 'Solana', network: 'Mainnet', amount: '12.305', symbol: 'SOL' },
+    { icon: '⬡', currency: 'Polygon', network: 'Mainnet', amount: '245.00', symbol: 'MATIC' },
+  ]
+  const transactions = [
+    { id: '1', type: 'in', amount: 0.05, currency: 'ETH', description: 'NFT Sale — Cosmic Warrior', date: '2 hours ago' },
+    { id: '2', type: 'out', amount: 12, currency: 'SOL', description: 'Quest Reward Conversion', date: '1 day ago' },
+    { id: '3', type: 'in', amount: 100, currency: 'MATIC', description: 'Karma Reward Payout', date: '3 days ago' },
+  ]
+</script>
+<div class="wlt-shell">
+  <div class="wlt-header"><h2 class="wlt-title">💰 Wallet</h2><p class="wlt-sub">Your OASIS multi-chain wallet.</p></div>
+  <div class="wlt-balances">
+    {#each balances as b (b.currency)}
+      <div class="wlt-balance-card">
+        <div class="wlt-currency-icon">{b.icon}</div>
+        <div class="wlt-currency-info"><div class="wlt-currency-name">{b.currency}</div><div class="wlt-currency-net">{b.network}</div></div>
+        <div class="wlt-amount">{b.amount} <span class="wlt-symbol">{b.symbol}</span></div>
+      </div>
+    {/each}
+  </div>
+  <div class="wlt-actions">
+    <button class="wlt-action-btn">📤 Send</button>
+    <button class="wlt-action-btn">📥 Receive</button>
+    <button class="wlt-action-btn">🔄 Swap</button>
+  </div>
+  <div class="wlt-tx-header">Recent Transactions</div>
+  <div class="wlt-tx-list">
+    {#each transactions as t (t.id)}
+      <div class="wlt-tx">
+        <div class="wlt-tx-icon wlt-tx-icon--{t.type}">{t.type === 'in' ? '↓' : '↑'}</div>
+        <div class="wlt-tx-info"><div class="wlt-tx-desc">{t.description}</div><div class="wlt-tx-date">{t.date}</div></div>
+        <div class="wlt-tx-amount wlt-tx-amount--{t.type}">{t.type === 'in' ? '+' : '-'}{t.amount} {t.currency}</div>
+      </div>
+    {/each}
+  </div>
+</div>
+<style>
+.wlt-shell{display:flex;flex-direction:column;gap:18px}.wlt-header{text-align:center}.wlt-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.wlt-sub{font-size:13px;color:#7a9bbf;margin:0}.wlt-balances{display:flex;flex-direction:column;gap:10px}.wlt-balance-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:14px 16px}.wlt-currency-icon{font-size:24px}.wlt-currency-info{flex:1}.wlt-currency-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}.wlt-currency-net{font-size:11px;color:#7a9bbf;margin-top:2px}.wlt-amount{font-family:'Share Tech Mono',monospace;font-size:16px;color:#00c8ff;font-weight:600}.wlt-symbol{font-size:12px;color:#7a9bbf}.wlt-actions{display:flex;gap:10px}.wlt-action-btn{flex:1;background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:10px;cursor:pointer;transition:all .2s}.wlt-action-btn:hover{background:rgba(0,200,255,.15)}.wlt-tx-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.wlt-tx-list{display:flex;flex-direction:column;gap:8px}.wlt-tx{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.08);border-radius:8px}.wlt-tx-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.wlt-tx-icon--in{background:rgba(72,220,130,.15);color:#48dc82}.wlt-tx-icon--out{background:rgba(255,107,107,.15);color:#ff6b6b}.wlt-tx-info{flex:1}.wlt-tx-desc{font-size:13px;color:#e0f0ff}.wlt-tx-date{font-size:11px;color:#4a6a88;margin-top:2px}.wlt-tx-amount{font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:600;white-space:nowrap}.wlt-tx-amount--in{color:#48dc82}.wlt-tx-amount--out{color:#ff6b6b}
+</style>

package/src/components/avatar/AvatarWallet.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Avatar Wallet</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/avatar/EditAvatar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Edit Avatar</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/avatar/SearchAvatar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Search Avatar</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/avatar/ViewAvatar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">View Avatar</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/comingsoon/ComingSoon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Coming Soon</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/confirmation/Confirmation.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Confirmation</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/contact/Contact.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Contact</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/data-screen/AddData.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Add Data</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>

package/src/components/data-screen/CrossChainManagement.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  export let show = false
+  const dispatch = createEventDispatcher()
+  function close() { dispatch('hide') }
+</script>
+{#if show}
+<div class="cs-shell">
+  <div class="cs-icon">ℹ️</div>
+  <h2 class="cs-title">Cross-Chain Management</h2>
+  <p class="cs-body">UI Coming Soon — use the OASIS API from the Developer menu for this functionality.</p>
+  <button class="cs-btn" on:click={close}>OK</button>
+</div>
+{/if}
+<style>
+.cs-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.cs-icon{font-size:48px}.cs-title{font-family:Orbitron,sans-serif;font-size:18px;color:#fff;margin:0}.cs-body{font-size:13px;color:#7a9bbf;line-height:1.6;margin:0;max-width:340px}.cs-btn{margin-top:8px;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer}
+</style>