@oasisomniverse/svelte 1.0.0

package/package.json

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

package/src/components/AvatarConnect.svelte

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

package/src/components/AvatarProfile.svelte

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

package/src/components/ComingSoon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let title = 'Feature Coming Soon'
+  export let message = 'This feature is currently under development and will be available soon.'
+</script>
+<div class="cs-shell">
+  <div class="cs-icon">🚀</div>
+  <h2 class="cs-title">{title}</h2>
+  <p class="cs-body">{message}</p>
+  <div class="cs-badge">Coming Soon</div>
+</div>
+<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:20px;color:#fff;margin:0}.cs-body{font-size:14px;color:#7a9bbf;line-height:1.6;margin:0;max-width:360px}.cs-badge{background:rgba(255,180,60,.12);border:1px solid rgba(255,180,60,.28);color:#ffb43c;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 14px;text-transform:uppercase}
+</style>

package/src/components/Confirmation.svelte

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

package/src/components/Contact.svelte

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

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

package/src/components/ForgotPassword.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { forgotPassword } from './oasisStore'
+
+  const dispatch = createEventDispatcher<{ switchTo: 'login' }>()
+
+  let email = ''
+  let loading = false
+  let error = ''
+  let sent = false
+
+  async function submit() {
+    if (!email) { error = 'Please enter your email address.'; return }
+    loading = true
+    error = ''
+    try {
+      await forgotPassword(email)
+      sent = true
+    } catch (e: any) {
+      error = e?.message ?? 'Request failed. Please try again.'
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<div class="oasis-auth-form">
+  <div class="oasis-auth-header">
+    <h2 class="oasis-auth-title">Forgot Password?</h2>
+    <p class="oasis-auth-sub">Enter your email and we'll send a reset link if the account exists.</p>
+  </div>
+
+  {#if error}
+    <div class="oasis-auth-error">{error}</div>
+  {/if}
+
+  {#if !sent}
+    <div class="oasis-field">
+      <label class="oasis-label" for="fp-email">Email</label>
+      <input class="oasis-input" id="fp-email" type="email" bind:value={email} placeholder="name@example.com" autocomplete="email" />
+    </div>
+    <button class="oasis-btn" type="button" disabled={loading} on:click={submit}>
+      {loading ? 'Sending…' : 'Send Reset Link'}
+    </button>
+  {:else}
+    <div class="oasis-auth-success">✅ Reset link sent! Check your inbox.</div>
+  {/if}
+
+  <a class="oasis-link oasis-link--center" href="#" on:click|preventDefault={() => dispatch('switchTo', 'login')}>← Back to Login</a>
+</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; line-height:1.5; }
+.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: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; font-size:13px; }
+.oasis-link--center { text-align:center; }
+.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/Game.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Game { id: string; name: string; genre: string; description: string; players: number; karma: number; icon: string; playing: boolean }
+  let games: Game[] = [
+    { id: '1', name: 'Karma Wars', genre: 'Strategy', description: 'Battle other avatars for karma dominance in real-time.', players: 12450, karma: 50, icon: '⚔️', playing: false },
+    { id: '2', name: 'Seed Garden', genre: 'Simulation', description: 'Grow and cultivate a virtual garden to earn seeds and karma.', players: 8900, karma: 30, icon: '🌱', playing: false },
+    { id: '3', name: 'OASIS Racer', genre: 'Racing', description: 'Race across virtual worlds and earn speed karma.', players: 5600, karma: 40, icon: '🏎️', playing: false },
+    { id: '4', name: 'NFT Quest', genre: 'RPG', description: 'An epic RPG adventure to discover legendary NFTs.', players: 22000, karma: 80, icon: '🗡️', playing: false },
+  ]
+  function toggle(g: Game) { g.playing = !g.playing; games = [...games] }
+</script>
+<div class="game-shell">
+  <div class="game-header"><h2 class="game-title">🎮 Games</h2><p class="game-sub">Play games in the OASIS to earn karma and rewards.</p></div>
+  <div class="game-grid">
+    {#each games as g (g.id)}
+      <div class="game-card" class:game-card--playing={g.playing}>
+        <div class="game-icon">{g.icon}</div>
+        <div class="game-genre">{g.genre}</div>
+        <div class="game-name">{g.name}</div>
+        <div class="game-desc">{g.description}</div>
+        <div class="game-meta"><div class="game-players">👥 {g.players.toLocaleString()}</div><div class="game-karma">+{g.karma} karma/hr</div></div>
+        <button class="game-btn" class:game-btn--stop={g.playing} on:click={() => toggle(g)}>{g.playing ? '⏹ Stop' : '▶ Play'}</button>
+      </div>
+    {/each}
+  </div>
+</div>
+<style>
+.game-shell{display:flex;flex-direction:column;gap:18px}.game-header{text-align:center}.game-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.game-sub{font-size:13px;color:#7a9bbf;margin:0}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.game-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:18px 14px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s}.game-card:hover{border-color:rgba(0,200,255,.3)}.game-card--playing{border-color:rgba(0,200,255,.5);background:rgba(0,200,255,.05)}.game-icon{font-size:40px}.game-genre{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5ba8ff}.game-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff}.game-desc{font-size:12px;color:#7a9bbf;line-height:1.5;flex:1}.game-meta{display:flex;justify-content:space-between}.game-players{font-size:11px;color:#7a9bbf}.game-karma{font-size:11px;color:#48dc82;font-weight:600}.game-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;cursor:pointer;transition:opacity .2s;margin-top:4px}.game-btn--stop{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}
+</style>

package/src/components/HyperDrive.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  let active = false
+  const metrics = [
+    { label: 'Throughput', value: '4.2 TB/s' },
+    { label: 'Latency', value: '0.3ms' },
+    { label: 'Uptime', value: '99.98%' },
+  ]
+  const nodes = [
+    { id: '1', name: 'ONODE Alpha — US East', status: 'active', latency: 12 },
+    { id: '2', name: 'ONODE Beta — EU West', status: 'active', latency: 28 },
+    { id: '3', name: 'ONODE Gamma — Asia Pacific', status: 'idle', latency: 55 },
+  ]
+</script>
+<div class="hd-shell">
+  <div class="hd-header"><h2 class="hd-title">🚀 HyperDrive</h2><p class="hd-sub">Quantum-speed data layer for the OASIS Omniverse.</p></div>
+  <div class="hd-status-card" class:hd-status-card--active={active}>
+    <div class="hd-status-icon">{active ? '⚡' : '💤'}</div>
+    <div class="hd-status-info">
+      <div class="hd-status-label">HyperDrive Status</div>
+      <div class="hd-status-val" class:hd-status-val--on={active}>{active ? 'ACTIVE' : 'OFFLINE'}</div>
+    </div>
+    <button class="hd-toggle-btn" class:hd-toggle-btn--on={active} on:click={() => active = !active}>{active ? 'Disengage' : 'Engage'}</button>
+  </div>
+  {#if active}
+    <div class="hd-metrics">
+      {#each metrics as m}<div class="hd-metric-card"><div class="hd-metric-val">{m.value}</div><div class="hd-metric-label">{m.label}</div></div>{/each}
+    </div>
+    <div class="hd-nodes-header">Connected Nodes</div>
+    <div class="hd-nodes">
+      {#each nodes as n (n.id)}
+        <div class="hd-node">
+          <div class="hd-node-dot hd-node-dot--{n.status}"></div>
+          <div class="hd-node-name">{n.name}</div>
+          <div class="hd-node-latency">{n.latency}ms</div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+<style>
+.hd-shell{display:flex;flex-direction:column;gap:18px}.hd-header{text-align:center}.hd-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.hd-sub{font-size:13px;color:#7a9bbf;margin:0}.hd-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;transition:border-color .2s}.hd-status-card--active{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.05)}.hd-status-icon{font-size:28px}.hd-status-info{flex:1}.hd-status-label{font-size:12px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}.hd-status-val{font-family:'Orbitron',sans-serif;font-size:16px;color:#7a9bbf;margin-top:2px}.hd-status-val--on{color:#00c8ff}.hd-toggle-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}.hd-toggle-btn--on{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}.hd-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hd-metric-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.hd-metric-val{font-family:'Share Tech Mono',monospace;font-size:20px;color:#00c8ff;font-weight:600}.hd-metric-label{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.hd-nodes{display:flex;flex-direction:column;gap:8px}.hd-nodes-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.hd-node{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.07);border-radius:8px}.hd-node-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.hd-node-dot--active{background:#48dc82;box-shadow:0 0 6px #48dc82}.hd-node-dot--idle{background:#7a9bbf}.hd-node-name{flex:1;font-size:13px;color:#e0f0ff}.hd-node-latency{font-family:'Share Tech Mono',monospace;font-size:12px;color:#7a9bbf}
+</style>

package/src/components/KarmaPanel.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { derived } from 'svelte/store'
+  import { session } from './oasisStore'
+
+  type Tab = 'records' | 'stats' | 'weightings'
+  let activeTab: Tab = 'records'
+
+  const level = derived(session, $s => Math.floor(Math.sqrt(($s?.karma ?? 0) / 100)) + 1)
+</script>
+
+<div class="kp-shell">
+  <div class="kp-banner">
+    <div class="kp-stat">
+      <div class="kp-stat-label">KARMA</div>
+      <div class="kp-stat-value">{$session?.karma ?? '—'}</div>
+    </div>
+    <div class="kp-stat">
+      <div class="kp-stat-label">LEVEL</div>
+      <div class="kp-stat-value kp-stat-value--level">{$level}</div>
+    </div>
+    <div class="kp-stat">
+      <div class="kp-stat-label">AVATAR TYPE</div>
+      <div class="kp-stat-value kp-stat-value--type">User</div>
+    </div>
+  </div>
+
+  <div class="kp-tabs">
+    <button class="kp-tab" class:kp-tab--active={activeTab === 'records'} on:click={() => activeTab = 'records'}>Akashic Records</button>
+    <button class="kp-tab" class:kp-tab--active={activeTab === 'stats'} on:click={() => activeTab = 'stats'}>Stats</button>
+    <button class="kp-tab" class:kp-tab--active={activeTab === 'weightings'} on:click={() => activeTab = 'weightings'}>Weightings</button>
+  </div>
+
+  {#if activeTab === 'records'}
+    <div class="kp-panel kp-empty">
+      <div class="kp-empty-icon">📜</div>
+      <p>No karma records found.<br>Complete actions in the OASIS ecosystem to build your Akashic Record.</p>
+    </div>
+  {:else if activeTab === 'stats'}
+    <div class="kp-panel kp-empty">
+      <div class="kp-empty-icon">📊</div>
+      <p>No stats available yet.</p>
+    </div>
+  {:else}
+    <div class="kp-panel">
+      <div class="kp-vote-banner">
+        <div>
+          <strong>Karma Voting</strong>
+          <p>Community voting to adjust karma weightings is coming soon.</p>
+        </div>
+        <button class="kp-btn-ghost">Vote on Weightings <span class="kp-soon">Coming Soon</span></button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+.kp-shell { color:#fff; display:flex; flex-direction:column; gap:20px; }
+.kp-banner { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
+.kp-stat { background:rgba(0,200,255,.06); border:1px solid rgba(0,200,255,.12); border-radius:10px; padding:14px; text-align:center; }
+.kp-stat-label { font-size:10px; font-weight:700; letter-spacing:.1em; color:#7a9bbf; text-transform:uppercase; margin-bottom:6px; }
+.kp-stat-value { font-family:'Orbitron',sans-serif; font-size:22px; color:#00c8ff; }
+.kp-stat-value--level { color:#a78bfa; }
+.kp-stat-value--type { color:#48dc82; font-size:16px; }
+.kp-tabs { display:flex; gap:4px; border-bottom:1px solid rgba(0,200,255,.12); }
+.kp-tab { background:none; border:none; color:#7a9bbf; font-size:13px; padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; }
+.kp-tab--active { color:#00c8ff; border-bottom-color:#00c8ff; }
+.kp-panel { padding:16px 0; }
+.kp-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 16px; text-align:center; color:#7a9bbf; font-size:13px; line-height:1.6; }
+.kp-empty-icon { font-size:32px; }
+.kp-vote-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.03); border:1px solid rgba(0,200,255,.1); border-radius:10px; padding:16px; font-size:13px; color:#a8bfd8; line-height:1.5; }
+.kp-vote-banner strong { display:block; color:#fff; margin-bottom:4px; }
+.kp-btn-ghost { flex-shrink:0; background:transparent; border:1px solid rgba(0,200,255,.3); color:#00c8ff; border-radius:6px; padding:8px 14px; font-size:12px; cursor:pointer; white-space:nowrap; }
+.kp-soon { display:inline-block; background:rgba(255,180,60,.15); color:#ffb43c; border-radius:999px; font-size:9px; padding:2px 6px; margin-left:6px; letter-spacing:.06em; vertical-align:middle; }
+</style>

package/src/components/KarmaToast.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { karmaToast } from './oasisStore'
+</script>
+
+{#if $karmaToast}
+  <div class="karma-toast" transition:fly={{ y: 20, duration: 350 }}>
+    <span class="kt-amount">+{$karmaToast.amount} ✦</span>
+    <span class="kt-msg">{$karmaToast.message}</span>
+  </div>
+{/if}
+
+<style>
+  .karma-toast {
+    position: fixed; bottom: 32px; right: 32px; z-index: 9999;
+    background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(168,85,247,.1));
+    border: 1px solid rgba(59,130,246,.45); border-radius: 14px;
+    padding: 16px 24px; display: flex; flex-direction: column; gap: 4px;
+    backdrop-filter: blur(12px);
+  }
+  .kt-amount { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900; color: #3b82f6; }
+  .kt-msg { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #a8bfd8; }
+</style>